微信小程序-基础知识

1. 一个页面对应一个文件夹,对应4个文件 // js、json、wxml、wxss
2. 在utils目录中的js是通用模块
3. app.js/app.json/app.wxss是全局文件 // 应用层
4. project.config.json是配置文件 // 项目配置文件相当于开发软件配置
5. 页面级别最好不超过5层
6. 项目体积不超过2m // 超过可用分包8m
7. 在引入图片后没设置css默认高225px,高300px
8. 在iphone6中px/2,或使用rpx做单位
9. swiper要设置宽高,具体属性看文档
10. 页面的json文件只能配置window下的部分设置
11. 在js的data中定义的数据在wxml中使用{{ data }}
12. 不在data中声明的变量,在onload生命周期函数中要通过this.setData()方法传到data中,在wxml中也是使用{{}}进行绑定
13. 在使用{{}}进行数据绑定时可以在里面使用运算
14. 在写属性时,autoplay = 'true',这时是一个字符串而不是布尔值,要使用autoplay = {{ true }}才起作用
15. 条件渲染:
    <text wx:if="{{ true }}">内容</text> // 当if后面的值成立时内容才会被显示出来
16. 列表渲染:
    <block wx:for="{{ array }}" wx:for-index="inx" wx:for-item="itemName" wx:key="id">
      {{ inx }}: {{ itemName }}
    </block>
17. 条件渲染和列表渲染当数据多时,需要在外面使用<block />包起来
18. <view bind:tap="onTap"></view> // 加事件之前要使用bind(冒泡)/catch(非冒泡),tap === click
19. wx.navigateTo({ url: '' }) // 有返回箭头
20. wx.redirectTo({ url: '' }) // 无返回箭头, 新版小程序会自动在左上角出现home的icon
21. 微信小程序使用的导入导出是commonjs
22. 单标签要闭合不然报错
23. template模板: // 渲染时不会显示template,模板化,可以嵌套
    新建wxml和wxcc文件
    在wxml中<template name="自定义">内容</template>
    在使用的wxml中<import src="模板地址" /> // 引入html
    在使用的wxml中<template is="自定义">
    在使用的wxss中@import '模板地址' // 引入css
24. 监听template模板的事件需要在外面包一个view在这上面监听
25. 在监听的view上面传值,相当于自定义组件属性,要用data-开头="{{ data }}" // 自定义属性
26. 获取自定义属性的值要使用event对象,即event.currentTarget.dataset
    注意大小写,通过属性传值在js中用event对象获取,25中传值是驼峰都会变成小写, 传值用 '-'会变驼峰
27. 原则: 先静后动,先样式再数据
28. 跳转页面的参数可以通过onload中的event对象获取
29. storage缓存: 如果不清除则一直存在,最大上限10mb,有同步和异步
    同步:
      wx.setStorageSync(key, val) // 同步设置缓存
      wx.getStorageSync(key) // 同步获取缓存
      wx.removeStorageSync(key) // 同步删除缓存
      wx.clearStorageSync() // 同步删除所有缓存
    异步:
      wx.setStorage({ key: val }) // 异步设置缓存, 有回调
      wx.getStorage({ key }) // 异步获取缓存, 有回调
      wx.removeStorage({ key }) // 异步删除缓存, 有回调
      wx.clearStorage({}) // 异步删除所有缓存, 有回调
30. 如果页面要跳转到一个带有tabber的页面要使用wx.switchTab({ url: '' })
31. wx.showActionSheet() // 分享
32. 不能使用scss等预编译css
33. 小程序没有cookit
----------------------------------------------------------------------------------------------
1. 在模拟器中如不指明字体,window默认是微软雅黑,mac默认是苹方
2. 在wxml中最多页的是page组件
3. 使用<text>组件时里面用/n会换行
4. 移动设备的分辨率与rpx,在移动设备中给的是逻辑分辨率即pt
5. pt指逻辑分辨率,和屏幕尺寸没有关系
6. 1个pt可以有1个px或2个px或3个px甚至更多构成,人眼最多分辨2个物理像素点
7. 在iphone6下,2个px才构成1个pt // 1px = 1rpx = 0.5pt
8. 使用rpx在小程序中会自动在不同分辨率下进行转换
9. 小程序的设备使用的是逻辑分辨率,即pt,使用rpx可以在不同的pt自动转换成px
10. 使用this.setData(对象) // 传入的值必须是对象,如果本身是对象就不用加大括号,会自动执行解构赋值,最外层的变量名不会传到data中,只会把内容传过去
11. 生命周期:
    onLoad() // 页面加载
    onShow() // 页面显示
    onReady() // 页面初次渲染完成
    onHide() // 页面隐藏
    onUnload() // 页面卸载
    onPullDowRefresh() // 用户下拉刷新,wx.stoppullDownRefresh()停止刷新
    onReachBottom() // 页面上拉触底
    onShareAppMessage() // 用户点击右上角分享
12. 不支持v-bind:方式绑定数据,只能通过{{}}
13. 在AppData的调试工具中可以看到数据绑定情况
14. 背景音频的API的url不能是本地,只能是网络上的
15. 当状态改变时要显示不同的东西,wx:if/else或{{ 三元表达式 }}
16. 点哪一个详情页面跳转到哪一个对应的页面,把对应的id在跳转时传到详情页面中去,在详情页面中根据传递过来的id去加载对应的内容
17. 让框架去调用代码使用监听事件,如: no开头...
18. 在App.js中定义的全局变量或方法在页面的js中通过 const app = getApp() 这个方法拿到实例再拿到数据 // 变量和方法直接和生命周期平级定义
19. 在App.js中有3个生命周期
    onLaunch() // 应用加载时
    onShow() // 应用显示时
    onHide() // 应用在后台运行时
20. 在小程序的真机中如果要清除缓存则需要自己写个按钮调用清除缓存的方法
21. 在组件中的图片等本地资源要使用绝对路径
22. target指的是当前点击的组件,currentTarget指的是事件捕获的组件
23. 在小程序中的css命名要规范,没有scope
24. 编写组件时从小的写,传数据时从大的传
25. 给template模板使用data传值时可以传多个{{}}
26. 在onLoad中不要有ui相关的操作
27. 小程序上滑加载更多使用组件scoll-view,且需给y轴高度
28. 加载回来的数据与原本的数据相加展示在页面上可以通过wx.showNavigationBarLoading()在加载时显示Loading,显示在导航栏上Loading // wx.hideNavigationBarLoading()隐藏Loading
29. 在页面的json文件中,只能配置window下的选项,而在app.json中能配置pages、window、tabber
30. 在小程序中想要实现下拉刷新则需要在json文件中配置enablePullDownRefresh: true
31. 设置页面的全屏背景可以通过page设置css
32. 组件<icon>图标只有几种
33. 在使用模板的数据绑定或使用if、for等语法时, 变量都需要用{{}}包裹起来, 而不像vue一样使用v-bind
34. 在小程序中引入或导出可以使用 'module.expotrs + require' 或 'export + import'
----------------------------------------------------------------------------------------------
// setData 使用示例
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data' // 不要直接修改 this.data
    // 应该使用 setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    // 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})
----------------------------------------------------------------------------------------------
// 组件
1. 使用组件时需要在使用的页面的json中配置引入:
    "usingComponents": { '组件名': '组件目录' }
    即可在wxml中使用<组件名></组件名>
    也可在app.json中引入全局的公用组件即可在每个页面使用
    如果是npm包下载的组件, 需要通过工具栏的npm构建生成的miniprogram_npm文件夹才可引入使用
2. 组件只能继承全局文件的font/color的css
3. 小程序子组件向父组件传值时的this.triggerEvent与vue的this.$emit一样
4. 不要在properties的observer中修改自身的值,会触发无限递归 // this.properties.数据名, observer相当于vue的watch
5. 小程序自定义组件的扩展behavior是组件中js的抽象,把组件中相同的东西提取到一个behavior中,使用与自定义组件一样
   需要组件导入、注册,在属性方面,组件中与behavior发生重名时会覆盖,写在behavior后面(多个)会覆盖前面的
   而生命周期不会覆盖,会依次执行
6. 在properties中绑定的数据在wxml中可以直接用属性的方式在组件中使用
7. 组件的生命周期:
    created() // 渲染前
    attached() // 渲染时
    ready() // 渲染后
    mored() // 组件移动时
    datached() // 组件删除时
8. 在组件中的this.data和this.properties指的是同一个js对象
9. 自定义组件不支持hidden属性,如要实现则在组件的properties中添加hidden属性,然后在组件的wxml中绑定属性
10. 组件中只进行自身的逻辑,关于其他的业务则放在调用方进行 // 粒度
11. 在小程序的组件中使用插槽slot和vue中一样,但需要在组件的js中的component下新增options: { multipleslots: true }才能使用
12. 不能对自定义名字的组件进行css修饰无效,可以对自定义组件下的某一个标签修饰
13. 组件的css可以通过小程序的外部样式来改变内部样式
    在component下新增extermalclasses: ['样式名'],然后把样式名加在需要应用的标签上
    在外部的页面中的组件名上增加 样式名="自定义样式名",一个是内部样式名,一个是外部样式名
    需要加!important,也可提升优先级的其他方法,默认不确定外部会覆盖内部
14. 小程序的{{}}只能写简单的js表达式,而不能调用方法
15. wxs 中只能写 ES5 语法，不能使用 wxAPI
    在 wxs 中的每个方法的最后一个形参是该页面 js 的实例，可以通过这个实例调用该 js 中的方法进行数据传递
    在wxs中通过module.export = { 函数名 }导出
    在wxml中通过<wxs src="wxs文件的路径" module="自定义名字">
    在wxml中通过自定义名字.函数名调用，注意要加 {{}} 双花括号
    也可直接在wxs中嵌入wxs代码<wxs module="自定义">内容</wxs>
16. 组件也可以引用组件、方法和页面引用组件一样
17. 父组件通过属性方式给子组件传递数据，子组件通过 this.triggerEvent('eventName', { name: 'chenj' }) 触发事件
18. 组件中可以写 <slot name="type1"></slot> 具名插槽，在调用方使用 <view slot="type1">插槽内容</view> 使用
19. 小程序中的 wxs 类似vue的filter过滤器，处理数据显示格式，可以直接在 wxml 中使用，进行页面数据的处理
20. 在小程序开发者工具中的预览的右下角中的三个点中可以自动生成骨架屏
21. 小程序中的 behavior 类似 Vue 中的 mixins
22. 小程序中可以定义 externalClasses: ['class1', 'class2'] 外部样式类，可让调用组件者通过特点的类名修改样式
22. 小程序的预览图片 API 和选择图片 API 会触发组件 show() 和 hide() 生命周期函数
----------------------------------------------------------------------------------------------
// 其他
1. 在js拿到数据后通过setData绑定到data中,即可在wxml中使用, 即数据可以通过data定义也可以通过setData定义
2. wx:key的取值为不重复的数字或字符串,如果遍历下的列表是数字或字符串,可以wx:key = "*this" // *this
3. 通过锁的概念解决重复加载数据的问题,在加载前定义一个flag变量进行判断,进行中不执行加载代码
4. this.setData和this.data.名字,如果数据在wxml中有应用绑定则使用this.setData,如果没有可以使用this.data.名字 // 在组件中
5. 可以使用图片按钮让按钮自定义样式
6. 公众号分为服务号和订阅号
7. 在小程序中使用npm后,然后再点击工具栏的npm构建才能导入使用
8. 微信小程序切至后台后，定时器会在 7s 左右暂定
9. 企业微信小程序，如果不是当前企业成员则打不开对应的小程序
10. 在微信开发者工具中获取企微环境第一次没问题，第二次开始就获取不到
11. WeixinJSBridge 在微信浏览器自带的对象
12. 在开发微信网页时，如果是安卓手机可以打开 debugx5.qq.com 这个地址清除网页缓存，如果是苹果手机则需要重新登录微信清除网页缓存
13. 在开发微信网页时，安卓手机打开微信 webview 有缓存导致第二次白屏，解决方法在 webview 链接后加一个时间戳
    切记不能在 webview 页面对 url 做其他操作，会引起其他 bug，如加解密 url
----------------------------------------------------------------------------------------------
// 小程序文档相关
1. 小程序是双线程架构，一个是渲染层（webview）、一个是逻辑层（js）// https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0006a2289c8bb0bb0086ee8c056c0a
2. 小程序通过在 `sitemap.json` 进行配置，可以支持更多的微信搜索，类似 SEO // https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
3. WXS 是在渲染层中运行的，而不是逻辑层，所以它比在逻辑层执行的快 // https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html
4. 小程序 js 的 polyfill 用的是 core-js // https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/js-support.html
5. 开发者在后台发布新版本之后，无法立刻影响到所有现网用户，正常情况下，在全量发布 24 小时之后，新版本可以覆盖 99% 以上的用户 // https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/update-mechanism.html
6. 由于Android系统限制，目前还无法获取到按 Home 键退出到桌面，然后从桌面再次进小程序的场景值，对于这种情况，会保留上一次的场景值 // https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
7. Skyline 渲染引擎是与 Webview 渲染引擎类似的东西 // https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/introduction.html
8. glass-easel 组件库是与 exparser 组件库类似的东西 // https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/glass-easel/introduction.html
9. 单个分包或主包最大是 2M，代码包最大是 20M // https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
10. 主题切换 // https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html
11. 大屏适配 // https://developers.weixin.qq.com/miniprogram/dev/framework/ability/adapt.html
12. AI/AR // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/inference/tutorial.html
13. xr-frame是一套小程序官方提供的XR/3D应用解决方案 // https://developers.weixin.qq.com/miniprogram/dev/framework/xr-frame/
14. 小程序于硬件设备的音视频通话，仅支持 Android 和 Linux，需付费 // https://developers.weixin.qq.com/miniprogram/dev/framework/device/device-voip.html
15. 一对一、一对多的音视频对话，有主体类目要求 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/voip-chat.html
16. 分享朋友圈，注意是单页模式 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
17. 转发、分享信息 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
18. 聊天素材支持更多按钮打开小程序，需要配置 `supportedMaterials`，只有 Android 支持 // https://developers.weixin.qq.com/miniprogram/dev/framework/material/support_material.html
19. 订阅消息：分为一次性订阅、长期订阅、设备订阅，需求结合前端API来让用户授权，服务端才能进行消息推送，这个会推送到微信的 `服务通知` 中 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html
20. 统一服务消息：主要是通过公众号进行消息推送，这个会推送到微信的公众号中 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/uniform-message.html
21. 客服消息：这个会推送到微信的 `小程序客服消息` 中 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
22. 小程序码：分为有限制数量的小程序码、不限制数量的小程序码、有限制数量的小程序二维码，一般使用不限制数量的小程序码 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
22. 小程序链接
  22.1. `URL Scheme` 目前有效期最长保持 30 天，且只支持一个人访问 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
  22.2. `URL Link` 目前有效期最长保持 30 天，且只支持一个人访问，在微信内或者安卓手机打开 `URL Link` 时，默认会先跳转官方 H5 中间页 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-link.html
  22.3. 每天生成 `URL Scheme` 和 `URL Link` 总数量上限为50万
  22.4. `Short Link` 目前可以让用户自行选择是短期还是长期，但是有开放范围（电商类目的小程序） // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/shortlink.html
23. 普通链接二维码打开小程序 // https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html
24. 按需注入和用时注入 // https://developers.weixin.qq.com/miniprogram/dev/framework/ability/lazyload.html
25. 接口调用频率限制 // https://developers.weixin.qq.com/miniprogram/dev/framework/performance/api-frequency.html
26. 性能与体验 // https://developers.weixin.qq.com/miniprogram/dev/framework/performance/
27. 微信开放平台可以把 App、网页、公众号、第三方平台进行接入，这样就能使用微信相关的 API // https://open.weixin.qq.com/