小程序开发注意点

1、block标签不渲染在页面上，只是包含元素用的，用法：集体显隐
2、直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
3、由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。
4、不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。
5、小程序任何地方都可以直接用插值法使用变量，小程序中true也需要用插值法使用，比如{{true}}{{false}}
6、wx:for直接等于变量即可实现循环，使用方式：wx:for='{{items}}'，内部自动产生item，可以直接使用，也可以通过wx:for-index和wx:for-item修改默认的index和item
7、新建页面时，在app.json中输入页面路径之后编译项目就会自动生成页面以及对应的文件
8、微信小程序wxml不支持字面量对象，但支持字面量数组，对象可以写成数组形式：data-extra="{{[{unitType:'specs',index:index}]}}"
9、创建自定义组件时需要在json文件中添加代码："component": true；假设自定义组件中定义了一个方法叫customeMethod，在页面中可以通过this.myComponent = this.selectComponent('#myComponent')先获取组件实例对象，然后就可以通过this.myComponent.customMethod调用组件内方法了。
10、scroll-view页面，button置底如何做到？给scroll-view设置高度calc(100vh-button的高度)，并设置超出部分隐藏，然后scroll-view与button使用flex布局即可。注意顶部元素不要使用margin，不然会出现margin塌陷，导致页面内容还没到一屏就开始滑动了。
11、组件监听事件：observers，可以监听data和properties数据；页面没有监听事件，小程序中也没有计算属性和filter函数，可以考虑wxs实现，wxs中的函数可以写在{{}}中，例如：{{getData()}}，代替计算属性和filter函数。但是wxs中有很多函数限制，比如不认识let，只能var；比如不能使用数组的includes，只能使用最简单的for循环；等等。
12、插槽使用
子组件：<slot name="name"></slot>
父组件：<view slot="name"></view>
13、设置以及获取全局变量

var app = getApp();
app.globalData.iBeaconInfo; // 获取
app.globalData.iBeaconInfo = value; // 设置

14、小程序计算上下左右的安全距离env(safe-area-inset-bottom)，主要是针对IOS的齐刘海和底部横杠可能遮住按钮等内容
15、picker-view多列日期组件存在初始默认值赋值问题，主要是年月日组件渲染元素过多，导致元素还没渲染完成value就赋值了，找不到对应的数据就显示错误数据。解决办法：保证value在picker-view-column的数据渲染完毕之后赋值即可，比如通过setTimeout(function,0)将value的赋值放到主线程执行完毕之后。
16、小程序中不能使用background:url()引入本地背景图片，否则无法显示。解决办法：1、可以引用网络图片，就是全路径图片（带http或者https路径的）。2、将图片转成base64位编码使用也可以。
17、页面上image的src如果是静态值没有问题。如果通过js给他动态赋值，不能直接给一个相对路径，否则无法显示图片。引入图片的路径是在js中获取的，所以如果是相对路径需要在js代码中加上require('图片路径')来获取图片引用，再赋值给image的src属性。
18、配置文件sitemap.json配置小程序及其页面是否允许被微信索引
19、数据传递
1）父子组件或者父页面子组件之间传递数据，可以通过properties和this.triggerEvent('input-focus', value)来完成：
父组件传递数据：

<formInputItem
prefix="塘口名称"
prefix-class="proof-item-prefix requrie"
input-value="{{pondDetail.pondName}}"
data-field="pondName"
bind:input-change="handleInputChange"
bind:input-blur="handleInputChange"
placeholder="请填写塘口名称"
input-type="text"
>
</formInputItem>

子组件接收数据：

properties: {
  // 输入框上面便签
  formLabel: {
  type: String,
  value: ''
  },
  // 输入框前缀
  prefix: {
  type: String,
  value: ''
  },
}

子组件通过调用父组件方法修改父组件数据：

handleInputFocus(e) {
     let { value } = e.detail
     let { inputName } = this.data
     this.triggerEvent('input-change, { name: inputName })
}

父组件被子组件调用修改数据的方法：

handleInputChange(e){
    let { field } = e.target.dataset;
    let { value } = e.detail;
    this.setData({
      [`pondDetail.${field}`]: value,
  })
}

2）如果是父子页面之间传递数据：
父页面通过Url参数传递数据，通过events来设置父页面被子页面调用修改数据的方法：

wx.navigateTo({
        url: `/pages/home/pondFodderModel/pondFodderModel?modelId=${this.data.modelId}&modelName=${this.data.modelName}`,
        events: {
          setModel: (data) => {
            this.setData({
              'modelId': data.id,
              'modelName': data.name
            })
          }
        }
})

子页面修改父页面数据：

const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('setModel',{id,name})

20、微信小程序页面不允许使用Object.values等类似函数来遍历对象，所以可以使用以下方法在页面遍历对象：

//wxml 
<view wx:for="{{obj}}" wx:for-index="key" wx:for-item="value"> 
  {{key}} : {{value.address}} 
</view> 
//js 
data:{ 
  obj: {...} 
}

也可以通过wxs文件来实现
21、input输入框的一些特殊功能：通过confirm-type值控制键盘右下角按钮文字，input键盘回车事件bindconfirm，打开键盘自动聚焦等等。
22、微信很多内置接口在webview中使用的时候，webview的地址一定要使用真实域名（忌用本地IP、localhost），同时一定要真机调试才行。
23、微信小程序webview向小程序发送消息，可以通过wx.miniProgram.postMessage，然后通过webview上绑定bindmessage来指定监听事件。

<web-view
  src="{{url}}"
  bindmessage="handlePostMessage"
></web-view>

24、webview与小程序之间session、storage不共享。webview各个页面嵌套在小程序中，如果需要通过小程序跳转页面的话，各个webview之间也不共享session，但是可以共享localStorage，并且是永久缓存在本地的。如果不需要通过小程序跳转的话，session也可以共享。
25、微信小程序调用wx.request请求会返回一个requestTask对象，调用requestTask对象的abort方法会中断请求，例如const task = wx.request();task.abort()。vue中axios中断请求可以使用cancelToken，具体使用方法请查阅相关文章。
26、通过判断父组件是否滚动到底部来确定子组件是否可以滚动，实现方式如下：scroll-view自带方法bindscrolltoupper、bindscrolltolower都判断不准确，会出现误差，只能通过给scroll-view绑定bindscroll="scrollChild"事件来判断scroll-view是否滚动到了底部，具体实现代码如下：（同时存在以下问题：vivo手机判断scroll-view是否滚动到底部的时候存在0.3的误差，下面代码已修复该问题）

scrollChild(e){
  this.otherData.scrollTimer && clearTimeout(this.otherData.scrollTimer);
  this.otherData.scrollTimer = setTimeout(() => {
    let query = wx.createSelectorQuery().in(this)
    query.select('#detailWrap').boundingClientRect((res) => {
      // 0.5是因为vivo手机存在约等于0.3的误差
      if(res.top>0.5){
        this.setData({
          childScroll: false,
        })
      } else {
        this.setData({
          childScroll: true,
        })
      }
    }).exec()
  },40)
},

27、Storage的使用

this.setStorageSync('key', value)
let value=wx.getStorageSync('key')

28、设置小程序顶部title

wx.setNavigationBarTitle({
  title: shopname //页面切换，更换页面标题
})

29、小程序组件中默认不能使用app.wxss的全局样式
可以在该组件的js文件中添加addGlobalClass属性就可以使用了

Component({
  options: {
    addGlobalClass: true
  }
})

30、页面配置
应用级别配置

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色
    "navigationBarTextStyle": "black", // 导航栏标题颜色，仅支持 black/white
    "navigationBarTitleText": "微信接口功能演示", // 导航栏标题文字内容
    "backgroundColor": "#eeeeee", // 窗口的背景色
    "backgroundTextStyle": "light" // 下拉背景字体、loading 图的样式，仅支持 dark/light 
  }
}

页面级别配置

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值：default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持，微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持，微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom
pageOrientation	string	ortrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化 2.4.0 (auto) / 2.5.0 (landscape)
disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
usingComponents	Object	否	页面自定义组件配置，微信客户端1.6.3
initialRenderingCache	string		页面初始渲染缓存配置，支持 static / dynamic，微信客户端2.11.1
style	string	default	启用新版的组件样式，微信客户端2.10.2
singlePage	Object	否	单页模式相关配置，微信客户端2.12.0
restartStrategy	string	homePage	重新启动策略配置，微信客户端2.8.0