小程序

2018-06-14 本文已影响0人回凉_4161

1、新项目开发的准备

1.1、官方文档的基础阅读
1.2、开发工具及开发环境的配置
1.3、选择合适的框架

2、开发过程中的代码整合

2.1、请求方式简单化
2.2、类似代码方法化
2.3、共用逻辑组件化

3、遇到问题怎么办

3.1、开发者社区
3.2、github上相关仓库的issue
3.3、......

4、一些关键点

让小程序支持服务端Session
主要就是要添加Cookie支持，可以包装一下wx.request方法实现
（1）解析response的Set-Cookie应答头，并将cookie保存在本地
（2）以后每次请求把本地保存的cookie放到Cookie请求头中
关键代码：

let __TOKEN__ = '';
const request = async (params = {}) => {
    const options = {
        url: params.url,
        method: params.method || 'GET',
        data: params.data || {},
        header: {
            'Content-Type': 'application/json',
            'Cookie': __TOKEN__,
        },
    }
    const res = await wepy.request(options);
    if (res.statusCode >= 200 && res.statusCode < 300) {
        if (params.withCookie && res.header['Set-Cookie']) {
            __TOKEN__ = res.header['Set-Cookie'];
            wx.setStorageSync('__TOKEN__', __TOKEN__);
        }
        return res.data;
    };
    return {
        XCode: res.statusCode,
        XMessage: res.errMsg,
    };
};

微信授权方案

image.png

分页及下拉刷新
关键代码：

enablePullDownRefresh: true,
onPullDownRefresh() {
  console.log('下拉刷新列表')
}
onReachBottom() {
  console.log('上拉加载下一页')
}
wx.stopPullDownRefresh()，

小程序更新

wx.getUpdateManager()

5、踩过的坑

基础库不同的兼容
自定义标题栏，分享的时候有的会将标题栏截取
支付成功后进入后台，不可调用reLaunch否则报错：fail can not invoke relaunch in background
onShareAppMessage内不能调用异步方法
开发者工具看不到伪元素
wx.getUserInfo()接口更改问题
文本换行
微信小程序区分分享到群和好友
onLoad与onLaunch执行顺序问题
不要在循环组件里使用computed，会导致所有循环的组件计算的属性一样

6、一些建议

（1）button添加一个hover-class 是更好交互
（2）图片资源尽量减少本地使用，增加代码的容量

小程序