小程序开发

这次小程序开发所有功能和组件全部都是自己手写 的,因为之前也没意识到用别人的插件,所以花费了比较大的力气,几乎每天晚上都是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.

 

posted @ 2019-03-08 11:24  fpc  阅读(161)  评论(0编辑  收藏  举报