微信小程序原生开发以及uni-app学习笔记

微信小程序原生开发学习笔记:

1. app.json文件中，配置页面路径那里默认会把第一个页面路径对应的页面当作小程序的首页进行渲染。
2. 注意 wx:for 列表渲染中，wx:key="id" 中的id其实是 item.id 且不要使用 Mustache 语法，直接用双引号就行，元素项没有 id 那就使用 index代替，即 wx:key="index"。
3. 有的时候模拟器展现的效果与真机展现的效果有差异，需要以真机为准。
4. 由于配置tabBar配置项时需要在pages中配置路径，这个路径必须是放在前面的。
5. navigator的url必须以/开头，而不能是./等
6. 无论是声明式导航还是编程式导航都是严格区分跳转到tabBar页面还是非tabBar页面的，这一点值得关注。
7. 声明式导航:跳转到tabBar页面：url:"xxx"，open-type="switchTab" ,跳转到非tabBar页面:url:"xxx",open-type="navigate"
8. 编程式导航:跳转到tabBar页面:wx.switchTab({}),跳转到非tabBar页面:wx.navigateTo({})
9. onLoad钩子中的options参数就是导航路径中传递过来的参数
10. 页面事件:下拉刷新（重新加载数据）; 上拉触底（加载更多数据）
11. 页面的下拉刷新效果不会自动回去，需要手工调用方法才可以使下拉的页面回到上面。
12. 在下拉触底监听回调中，极有可能发起网络请求，但是如果用户频繁在onReachBottonDistance附近触发此事件就会引起频繁发起网络请求，因此需要节流操作。
13. 自定义编译模式：每当我们修改文件点击编译时总是跳到首页，而我们有时候不是在修改首页的代码，这时可以指定编译模式，使得改完代码点击编译时自动回到我们指定的页面，并且可以在编译模式中给页面传递参数。
14. 小程序的运行分为前台与后台，前台就是当前正在展现这个小程序，后台就是比如按下了home键（手机上的）返回主屏幕，但是小程序还在运行的状态就是后台运行。
15. WXS一般就是用来做过滤器配合Mustache语法使用的，不能再WXS里面指定事件的回调。
16. box-shadow:横向偏移,纵向偏移,阴影扩散,颜色
17. app.wxss文件中的样式不会影响到组件中的样式(前提是必须使用类选择器，使用其他选择器会影响到组件中的样式) 。
18.组件中data和properties的用法相同，都是可读可写，并且data和properties指向了同一个对象。
 如果想修改rgb对象中的r属性，可以采用
this.setData({
  'rgb.r':this.data.rgb.r+5
})
19.纯数据字段和非事件处理函数建议以下划线开头。  
20.对于网页来说根节点是html元素，对于小程序来说根节点是page元素。
21. 小程序当中安装包比较特殊，不可以直接使用，原因在于小程序无法读取node_modules中的第三方包，必须通过构建npm实现将node_modules中的包转移到miniprogram_npm目录下以后，小程序才可正常访问包。
22. vuex中修改store中的数据必须通过mutations进行修改，actions中不允许修改store中的值，但在小程序中修改store中的数据是通过actions实现的。
23. 小程序中的分包需要在构建项目的时候就明确指明主包和分包以及对应的页面和资源(自己手工配置,在app.json文件中),小程序会自己实现按需加载的过程
24. app.json文件中的subPackages节点用来指定分包,此数组中有几个对象就代表有几个分包,每一个对象中:root属性表示分包的名称(或者说分包的根目录),name是当前分包的别名,pages属性(数组)表示该分包中的页面
25. 在右上侧详情->基本信息中可以查看当前项目的大小以及对应每个分包的大小
26. 若需要对vantWeApp组件库中某组件样式进行覆盖,需要在options配置项中开启styleIsolation:shared

uni-app学习笔记:

项目重点内容:
1.使用事件委托完成对项目的优化（商品分类一级分类中将每一项的点击事件委托至其公共父元素，通过给每一项指定id为其index，再通过event.target.id拿到具体点击的那一项）
2.解决切换tab栏时滚动条不会自动归顶的问题（比如在大家电一级导航中将右侧的二级列表向下滚动了一些位置，再切换至热门推荐时滚动条不会自动从顶部开始，而是还是刚才的那个位置，通过给二级滚动标签绑定scrollTop属性，在每次切换一级分类时实现将scrollTop置零的操作）
3.解决自定义组件无法直接绑定原生事件的问题。（在自定义组件中将事件绑定到原生DOM上，通过触发父组件绑定的事件实现执行父组件中回调的问题）
4.实现将搜索页面历史记录持久化存储。
5.解决商品价格闪烁的问题，在商品详情数据请求回来之前，商品详情数据为空对象，这时空对象身上的price属性为undefined,这导致在页面刷新瞬间显示的是undefined，随后又瞬间变成了价格。 （其实这个问题不仅仅出现在价格上面，其他依赖商品详情数据的地方都有类似问题，解决的方法是在所有依赖商品详情数据的最外层包裹一个容器，如果没有商品详情数据没回来，干脆这个最外层容器就隐藏）
6.抽离mixins，将设置tabBar项中购物车徽标的相关计算属性，生命周期钩子抽离为一个mixin，使得无论在哪个页面下（都调用这个mixin代码）从而可以正常显示徽标。
7.解决用户在uni-number-box中输入非法字符后导致的数据紊乱问题(修改uni-number-box源码)
注意，不要在微信开发者工具中直接修改代码，因为那里的代码是由这里编译生成的，应该在这里改才对。
配置tabBar还是在pages.json(在小程序中是app.json)文件中的tabBar节点中进行配置。
注意，配置tabBar时，list数组中的pagePath不应该以.或者/开头，应该直接以pages开头才对。
把所有出现黑马优购的地方换成乐优购。
开发tabBar页面时需要进行创建tabBar分支，tabBar开发完毕后应该将此分支提交至远程库进行保存，随后应该将tabBar分支与本地master分支进行合并（合并完以后将基于此继续向下开发），最后删除本地的tabBar分支即可（远程那里还有保存，本地无需保存了）。
配置分包，应该在pages.json文件中指定subpackages节点，此节点为一个数组，里面有多少个对象就代表里面有多少个分包，每个分包又可以指定很多页面。
如何在循环遍历一个数组进行展示时剔除第一项，循环遍历所有元素，使用v-if或者v-show结合index隐藏掉第一项。
实现页面的滑动需要用到scroll-view组件，必须为此组件指定scroll-y或者scroll-x属性，若指定scroll-y则需指定高度，若指定scroll-x则需指定宽度
uni.getSystemInfo用于获取当前设备的型号、屏幕宽高、可使用区域的宽高等信息。
调用uni.setBarBadge方法可以为某项 tabBar 项设置徽标
        uni.setTabBarBadge({
          // tabBar项的索引
          index:2,
          // 徽标的内容（必须为字符串）
          text:this.total+""
        })
如何实现从数组中删除某一项，可以根据遍历找出那一项的索引，随后删除这一项，或者直接使用过滤器。

再次熟悉git常用命令：

git status 查看当前分支状态（有没有添加到暂存区？有没有提交到本地库）

git add . 将本地由git接管的所有文件添加到暂存区

git commit -m "description"将暂存区的文件提交到本地库

git push -u(第一次提交需要添加-u) origin master 将master分支提交到远程仓库

git checkout master 切换至master分支

git merge tabbar （若当前在master分支下，则将tabber分支合并至master分支）

git branch 查看当前分支

git branch -d tabbar 删除本地库中的tabbar分支 （确保自己不在tabbar分支才可删除tabbar分支）

git checkout -b home 创建home分支（基于master分支）并且切换到home分支