小程序开发

这次小程序开发所有功能和组件全部都是自己手写 的，因为之前也没意识到用别人的插件，所以花费了比较大的力气，几乎每天晚上都是7点半之后才下班，虽然辛苦了几个月，但是还是有所收获的，记下笔记，放下下次可以快速上手

1.小程序的模态框有以下几种，差不过等于alert confirm，而且自动居中，这些都比较好用，特别是showModal用的最多

2.列表的分页加载，这次列表的分页加载参考的是他人的帖子的方法

that.setData({searchLoading: true, searchLoadingComplete: false,dataArray: []})
if (res.data.error == 0 || res.data.error == 2) {
var data = res.data; // 接口相应的json数据
var xuans = data.data; // 接口中的data对应了一个数组，这里取名为 xuans

that.setData({
["dataArray[" + currentPage + "]"]: xuans,
currentPage: currentPage
})
if (res.data.error == 2) {
that.setData({searchLoading: false, searchLoadingComplete: true})
} else {
that.setData({searchLoading: true, searchLoadingComplete: false});
}
} else {
that.setData({searchLoading: false, searchLoadingComplete: true})
}
//延迟隐藏加载图层，因为关闭图层方法执行后，setData页面的渲染效果还未完成
setTimeout(function(){
wx.hideLoading()
},500)

但是之间出现了很多问题，页面下拉刷新的时候，没有拉到顶部就开始重新加载，这是由于无法给scroll-view定高度，不同的手机高度都不同。所以最后改成了onTabItemTap() 方法，每次tab切换到页面都会重新去加载，这样看起来更加自然点。但是这样又有一个问题，就是每次加载页面，会不定时的出现页面渲染过慢的问题。然后我在每次ajax请求完成后，都加了一个0.5秒的定时器，让页面的显示显得平缓些，但是还是没有达到我的要求，所以准备参考 https://www.2cto.com/kf/201808/770939.html 这篇博客的文章的方法，对其优化。优于已经上线了，所以具体的优化效果未知，感觉可以提升个0.5秒左右。

这次最高兴的就是做到的微信支付，文档看起来很复杂，最后合并了方法写在自己封装的类里就两个文件，80多行代码。

3.用户登录

目前小程序的用户登录，放弃以前的自动弹出授权的窗口。必须要用户自己点击才能出发授权，据说是因为之前facebook用户信息大量泄漏，所以腾讯整改了用户授权接口。

用户授权登录后，会返回一个sessionId , 这个sessionId有时效性。

官方推荐的登录方法为：用户第一次授权登录，服务器将sessionId保存到数据库，小程序端将sessionId保存到缓存中，然后每个接口都带着sessionId的信息，不用user_id。这样服务器接收到sessionId就会去查找数据库，判断是否存在这个用户，如果不存在这个用户，那么返回错误信息，小程序端重新发起授权登录。那么问题来了：小程序保存到缓存中的sessionId是不是一直不变的呢？不是的，小程序有个方法checkSession的方法，判断当前用户的session是否过期，过期后自动会发起登录授权

wx.checkSession({
  success() {
    // session_key 未过期，并且在本生命周期一直有效
  },
  fail() {
    // session_key 已经失效，需要重新执行登录流程
    wx.login() // 重新登录
  }
})

　我把上面的代码写到了app.js中，每次用户进入小程序都会执行这个方法。

4.app.js的坑

我发现app.js里

onLaunch: function () {}

在这个加载方法里写重定向是没用的，这点很坑，但是在app.js自己写的方法里是可以重定向的，所以我在app.js封装了一个方法

check: function () {
        var user_id = wx.getStorageSync('user_id') || false
        var session = wx.getStorageSync('session') || false
        if (!user_id || !session) {
            wx.navigateTo({
                url: '/pages/xx/index',
            })
            return false;
        }
        wx.checkSession({
            success: function (res) {},
            fail: function (res) {
                wx.navigateTo({
                    url: '/pages/xx/index'
                })
            },
        })
    },

　　每次页面加载使用show方法的时候，去执行一下这个方法app.check。

我们一般使用全局属性的时候，都会在app.js里加一个 globalData，然后我们会在 onLaunch 方法里 获取数据，赋值给 globalData  ，这里有一个问题，就是每次新打开小程序进入到首页的时候，如在index.js 里使用 app.globalData 获取到的数据是空的，有时候有数据，有时候没数据。所以我这里的改动方法为：在第一个页面的时候使用ajax重新拉取数据，其他页面就直接使用pp.globalData

5.web-view

这次又两个地方，都用到了 web-view。

遇到的问题：当 index.wxml 页面中使用了 web-view 这个组件的时候，web-view 就会自动打开，这样在index.js 里面使用setData 属性赋值都来不及，所以每次打开的页面都是空的。

解决方法：新建一个page/web/index ， 然后比如说，文章的详情页的某个链接是外部链接，那么点击的时候将这个外部链接传递到 page/web/index 去，我这里是将url保存到globalData 中

<web-view src="{{weburl}}"></web-view>
onLoad: function (options) {
    var url = app.globalData.weburl;
    this.setData({weburl:url})
    console.log(url);
},

　　

6.tab导航选中的时候更换图标

{
        "pagePath": "pages/xuan/index",
        "text": "公告",
        "iconPath": "resources/menu-xuan30.png",
        "selectedIconPath": "resources/menu-xuan.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "个人中心",
        "iconPath": "resources/menu-user30.png",
        "selectedIconPath": "resources/menu-user.png"
      }

　　在app.