以前自己只练习过开发些原生微信小程序，改用uni框架试试，简单记录下流程以及遇到的些问题。（记的东西有点杂，自用 🙏看起来繁杂请见谅）
（1）先全局安装
npm install -g @vue/cli
（只需要安装一次，安装过后就不用安装了）
PS： 直接npm install -g@vue/cli 安装 可能会报错 问题其实不是webpack的问题。 把nodeJS的版本切换到12或者更低，就OK了.
- 卸载vuecli5.0版本: npm remove -g @vue/cli
- 安装vue4.5.15版本: npm install -g @vue/cli@4.5.15
（2）创建项目
vue create -p dcloudio/uni-preset-vue my-project
（如果已有项目，cd后直接 npm install ）
PS ：npm WARN config global , are deprecated. Use `–location
解决方案：
- 找到目录：打开nodejs，并打开要修改的2个配置文件（npm.cmd 和 npm）
- 进行修改：将prefix -g替换为prefix --location=global
- 检验问题：输入npm-v
（3）进入项目里
cd my-project
（4) 需要的话 先安装sass依赖
npm install sass-loader node-sass
安装后style标签中加入属性 < style lang = “scss” >
（5）运行项目
npm run dev:mp-weixin
（6）打开微信开发者工具 导入项目myproject—>dist—>dev—>mp-weixin
（1）打开DCH，建立个人分支
（2）将项目导入到本地
（3）建立连接 打开VScode编译 同步个人分支
（4）提交代码后，打开Git Extensions 进行Push
①使用uni原生ui插件：
（1）项目搭建完，先安装sass 及 sass-loader
- npm i sass -D
- npm i sass-loader@10.1.1 -D
（2）安装uni-ui
npm install @dcloudio/uni-ui
（3）在script中引用和注册组件
（现在更多用uni_modules直接导入 会更加方便，详情见 uniapp：uni_modules组件开发与发布）
（4）在 template 中使用组件：
②使用SegmentedControl分段器
（1）SegmentedControl分段器也是Cloud团队开发的，先进行安装uni-ui（见①）
（2）然后打开插件市场，搜索你需要的插件,找到插件文档说明，比如uni-segmented-control插件文档
（3）迁移代码后，记得引用和注册组件。
代码片段示例：
③使用uViewUI
官方文档
实例项目
1.npm安装
- npm init -y //根目录没有package.json时执行
- npm install uview-ui //安装
- npm update uview-ui //更新
2.main.js引入uView库
3.安装sass
4.App.vue引入样式
5.uni.scss引入全局scss变量文件
6.page.json配置easycom规则（按需引入）
①父子组件间传参
1.父向子传递参数：
2.子向父传递参数：
子传父，子组件通过触发事件传递，父组件通过监听事件接收
②VueX
实际上，在组件的mounted钩子函数中就能进行数据的请求，父子组件之间，非父子组件之间进行传值也有一些方法，小型的项目也许这么做没事没问题，但是如果是进行大型项目，非父子之间传值，父子之间传值会出现混乱复杂的情况，如果使用vuex不止能把数据放在全局，组件无论在哪都能反问获取到，并且线路清晰，有利于维护。
1.配置步骤
npm install vuex --save 先安装依赖
1、在项目根目录中创建 store 文件夹，专门用来存放 vuex 相关的模块
4、在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：
2.基本用法
state
用来存储组件间共享的值
store.js定义：
组件：
然后主页面正常引入插件就可以了
mutations
只有 mutations 中定义的函数，才有权力修改state值
store.js定义：
组件:
actions
异步操作变更数据必须通过Actions，而不能使用Mutations
必须通过 context.commit() 触发某个mutation才行
store.js定义：
组件：
getters
用于对Store中的数据进行加工处理形成新的数据,不修改state
store.js定义：
组件：
③Mixins
-
与公共组件的区别
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。 -
与vuex的区别
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。 -
实例文档
功能说明 微信客户端通过wx.getUserInfo()获取用户的信息
后台有时候也需要获取微信客户端的用户信息，因此，就需要利用session_key这个秘钥来从微信平台中获取 [微信官方的链接]
-------> session_key 有什么用？
服务端给你的数据是加密的，如果你想解密就需要就需要sesison_key
--------> 怎么获取session_key ?
客户端通过 wx.login方法获取一个code（5 分钟内有效），把code 发送给自己的服务器，服务器通过另外的接口获取session-key
---------->如果我存储ssessiion-key 在自己的服务器，每次解析数据的时候就可以直接使用啦？
并不是，session-key 会过期。
----------> 那么我第一次登录的时候解析完数据，保存到服务器里，以后就不需要反复获取用户数据，获取sessionkey 并且解析数据啦？
可以，但是有个缺点，你保存的信息，是用户第一次登录时候的信息，如果用户修改了头像之类的，你数据库的信息不能够和微信的保持同步。
----------> 我想要自己的数据是最新的怎么办？
那么就每次进入小程序的时候调用登录接口，获取新的用户数据，获取sessonkey， 解析数据，然后展示数据。
----------->每次都要调用登录接口？
好像是这样，
---------->那么后台也要每次都获取sessionkey吗
不需要，你可以在前端通过checksessionkey 来检查sessionkey 是不是已经过期了，如果没有过期，那么就不需要重新获取。
---------> 每次都登录是不是有点麻烦？
我觉得也是，所以直接获取一次信息就好了，本地存储一个token ，除非用户删除小程序，不然的话，根本不需要登录。
微信登录过程
1.wx.login() 这个方法会返回一个code
2.后台根据 code + appid + appsecret 这个三个参数完成登录的认证，得到微信客户端的openid + session_key
①wx.checkSession()
有时候，我们会因为session_key不正确而导致解密或者校验签名失败。有几方面的原因：
1、因为wx.login()被调用时，用户的session_key会被更新导致就session_key失效。所以，在调用wx.login()的时候应该要明确需要登录之后再调用。
2、另外，微信不会把session_key的有效期告诉我们，用户越频繁使用微信，session_key的有效期就更长。
因为，就需要调用wx.checkSession()来校验当前用户的session_key是否有效。
①分包
请点击该链接，这位博主归纳的很好，如果想加快小程序启动速度，可在pages.json里配置preloadrule
①聊天界面
链接1
链接2
②平台环境判断
判断环境：
判断平台：
③实现滑动滚动
概念文档：1 2 3 4
④实现缓存列表数据
页面的缓存，我们需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。
从A页面跳转到B页面，返回A页面时 不会重新加载A页面数据
1.在路由选项中，router文件里配置meta属性
2.设置beforeRouteEnter判断从哪跳转的 如果是从详情页跳转的，则将当前路由对象的meta.isBack 设置为true,否则设为false
3.为了在其他页面进入时，更新页面中的列表数据，我们将在activated钩子函数中挂载页面初次进入时的请求数据
4.记得在App.vue声明一下
⑤点击按钮 增添DIV
⑥点击按钮 删除DIV
删除我参考的这个
⑦调用接口，传值返回数据
传入v.fourMCode返回后，赋值给res，再加入要使用的对象数组
如果是接手别人的项目。格式一般都看axios.js里是如何声明的
参考这篇文档
⑧带参跳转页面
传值：
接收：
调用common.js文件里的一个方法
⑨Vue 实例重新渲染
$forceUpdate很好用，注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
好点的办法用$set：接收3个参数，参数1:参数是需要更新的数组或对象，参数2:是数组的下标或者对象的属性名，参数3:是更新的内容
- $set用于更新数组：
- $set用于更新对象：
⑩ios端首次进入单次刷新页面
记录个小demo
⑪截取后端str字段
1.splice改变原数组,slice不改变原数组，一般截取后端的数据用slice方法
2.split() 方法用于把一个字符串分割成字符串数组。str.split(separator,limit) separator：从该参数指定的地方分割 string Object；limit：限制长度，可不传。
str=‘How are you doing today’
1.截取str前十位
2.截取str后十位
3.分割str取值