小程序开发之小试牛刀
Ø 简介
在当今互联网时代，小程序也占有一定市场份额，它的优点也是无可非议的。比如成本低，入门简单，跨平台(Android、iOS)，有强大的微信团队支持（开放平台），便于推广易、引入用户，无需安装等优点。当然也有缺点，比如用户容易遗忘它的存在，无法与用户主动互动，与微信强依赖，某些APP能实现的功能它也许不能很好实现。
好了，废话补多说，以下是笔者在小程序开发中的一些问题总结，包括如下内容：
1. 使用navigateTo() 导航函数跳转页面的生命周期，进入页面：onLoad, onShow, onReady，回退：onUnload（每次进入都是如此执行）
2. 使用navigateTo() 导航函数跳转的页面中的setInterval() 定时器，不会随着会退消亡，需要写代码销毁
3. 表单提交的两种方式
1) 采用 <form bindsubmit="formSubmit">; <input name='detailedAddress' />; function formSubmit(e) { const params = e.detail.value; }
表单提交事件的方式
2) 采用<input bindinput="inputChange" data-name='detailedAddress' />；function inputChange(e) { let form = that.data.form; let name = e.currentTarget.dataset.name; form[name] = e.detail.value; this.setData({ form: form });
设置page.data 中的数据的方式，再提交时取出数据即可。
4. 小程序引用外部文件
1) 引用外部CSS：@import '/style/box.wxss';
2) 赋值过程引用外部JS：const func = require('app/func.js');
3) 解构过程引用外部JS：import WxValidate from '../../../utils/WxValidate.js';
5. 获取小程序运行环境
在app.js onLaunch() 方法中可以获取，const envVersion = __wxConfig.envVersion; //'develop'开发版，'trial' 体验版，'release' 正式版
6. 小程序配置
1) onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，默认为50px。可以在页面设置"onReachBottomDistance": 0，这是只有当滚动条到达底部时才出发，也可以全局配置。
2) 使用wx.chooseLocation() 打开地图选择位置功能时，微信7.0.0以下版本需要在app.json 中加入以下权限配置
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于定位效果展示"
}
}
7. Promise 的使用
1) 声明Promise 可以实现多个回调方法，而且可以实现异步调用，例如：在fun1() 函数中声明：function fun1() { return new Promise((resolve, reject) => { resolve('success'); || reject('error'); }); }
2) 调用方式：func().then(res => { res 为'success' }).then(res => { res 为undefined }).catch(res => { res 为 'error' });
3) 可以看见Promise 的成功回调函数可以多个，但是只能第一个能接受到参数；错误回调只能有一个，定义多个也只会回调第一个。
4) 注意：当需要使用await 异步调用时，在Promise 中必须调用resolve() 方法，待Promise 执行完后才会执行await 之后的代码。
5) 注意：当在事件中，需要获取异步方法中接口返回的数据，事件方法需要使用async 声明，使用如（var data = await order.getOrderDetail()）的方法获取数据；在异步方法中使用resolve(data) 方法返回数据。
8. ES6语法
1) JSON 对象部分字段赋值ES6 简写形式
var obj = { a: 123, b: 456, c: 789 };
const { a, c } = obj; //相当于：const a = obj.a; const c = obj.c;
console.log(JSON.stringify(a)); //123
console.log(JSON.stringify(c)); //789
9. 引用JS import 和require 的区别
node编程中最重要的思想就是模块化，import和require都是被模块化所使用。
1) 遵循规范
require 是AMD规范引入方式；
import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法。
2) 调用时间
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头。
3) 本质
require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量。
import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require。
10. 解决微信小程序中 new Date() 转换时间时间格式时 IOS 不兼容的问题
var dstr = data.staff_hire_date.replace(/-/g, '/');
data.staff_hire_date = new Date(dstr).format(
"yyyy-MM-dd"
);
11. 下拉刷新
"enablePullDownRefresh": true //启用下拉刷新
"backgroundTextStyle": "dark" //设置下拉刷新样式(dark、light)
onPullDownRefresh: function ()//页面相关事件处理函数--监听用户下拉动作
wx.stopPullDownRefresh(); //停止刷新
wx.startPullDownRefresh(Object object);//开始下拉刷新
禁止页面拖动，在page.json中设置"disableScroll": true 即可
Ø 注意事项总结
1. 本地缓存wx.setStorageSync() 与wx.getStorage() 中数据不共享；
2. 页面中的字段，第一次导航进入后，回退了再次进入会是原来的值，比如：var editIsDefault = consts.whether.no;
3. 小程序中data 属性，在JS 获取时会转为全部小写，例如：在wxml 中设置data-skuId="{{1}}"，在JS 获取时需要使用小写：e.currentTarget.dataset.skuid
4. tabBar 页面只会执行一次onLoad() 方法，之后点击或wx.switchTab 并不会执行，会执行onShow() 方法
5. 页面中的变量的值，如：var isLoadComplete = false; 不会跟着页面this 变化，一次赋值后，下次进入并不会发生改变
6. 所有显示的页面，都需要在app.json 注册，例如："pages": ["pages/cpage/shop/shop",] 否则不会显示标题。
7. 页面中的变量不会跟谁页面关闭而消失，例如：var isOnShow = false; 当页面使用wx.navigateBack() 方法退回后，再次打开页面这个变量依然是原来的值。
8. iOS不支持日期格式如：2020-11-07 18:24:25，使用date.getMinutes().toString() 是会返回NaN，需要改为2020/11/07 18:24:25。
