文章提纲
- 开发前，初期的难点与思考
- 开发中又出现的问题以及解决方法
- 开发完，分别对腾趣， 对小程序，对wepy还有哪些不足
年后先做了个简单的小程序活动页面，测试恋爱忠诚度的，用的是小程序原生开发的；
3.26前一个星期做腾趣商城小程序的项目规划，划分了差不多22个任务，两人分工，其中难点有：
- 使用wepy开发的模式转变，还好之前用原生做过，对问题分析略有帮助
- 定制功能各方面的不确定性，上传用户图片，手势操作，获取定制元素的大小位置等信息
- 对组件化开发还不够了解，如何划分组件更合理
- 两个人开发，代码如何布置，防止文件冲突，暂时用svn
开发中结合github上一个wepy的项目，用了它的封装好的几个函数，主要是http.js,(这里需要写对http.js的改动)；还有目录结构
components
activity
main
subject
images
mixins
pages
activity
main
subject
styles
custom
lib
app.wpy
config.js
遇到的问题与解决
- 小程序文件限制为2mb，图片普遍较大 （解决办法：图片存到线上服务器，使用统一的图片地址前缀https://api.51app.cn/webPage/tq/xcx/images，style和script要分别引入）
- 定制页面先在小程序页面上实现了上传图片和手势操作（刚好是alloy_finger的小程序版），以及获取图片的位置大小等信息，图片清晰，操作也顺畅（在我自己的6s上，安卓不知怎么样）；后来考虑到字体文件过大只能用本地的文件，还有后面多个元素的操作，问题的添加等问题，遂用跳转到webview的方式来是实现定制，此方案同样有需要解决的问题，一是不能用input type=file来上传图片，一点就退出了小程序，只能用微信jssdk的api，可它上传后只返回一个图片路径或是微信服务器上的id，无法获取到图片的信息，不能用原来上传图的接口以及之前图片旋转的问题，故通过传线上图片id给后台下载图片后获取到Orientation来修复角度；
- 跳转webview时要把token传过去，防止两边的不统一
- 属性选择组件结合web上的还算顺利
- 小程序不能直接识别公众号图片二维码，小程序码倒是可以
- banner上的可能出现跳转url的地方，全部判断是否有goodsId，没有就不显示
- 图片是<image></image> input记得要闭合
- 对于点击按钮请求接口后才跳转页面的要加防抖，如立即购买的按钮，疯狂点的话，会出现多个确认订单页面；一开始是想到用个变量来控制，变量为true就return，初始是false，点击一次后设为true，请求不管成功失败complete后再设为false；后来想到和webview的定制页面一样用个loading层，刚好可以用微信的 wx.showLoading({
title:'',
mask:true
})；记得加上mask:true，阻止穿透，再就是这个它不是自己消失的，最后在请求complete里面wx.hideLoading() - 上面的问题又想到好办法，直接把这个loading加到http.js里面的请求中，那这样就会和之前做的loading层重复，选择去掉原来loading层的菊花图，白色遮罩还是要有；这个办法真好，不用一个个页面加，统一修改了，再就是给了用户提示也不错
- 微盟的支付，有两种方式，一是自己已经有了开通了微信支付的帐号绑定即可，二是委托微盟代申请的小程序支付，其中还要填企业的营业执照，还有银行卡等信息，应该是他们先收钱然后再打到商户账上，貌似对个人不能用；微盟套餐的价格没有直接看到，是申请后他们再联系。功能很多，确实很方便，生成的页面还挺好看的，我们要是要做这一套，估计够呛。感觉我们自己的小程序都可以直接用他们的。。。
- 下拉刷新不回弹；在真机上回弹会超过顶部再往下回来；下拉卡的那下要不就是微信设计的，下拉后顿一下再回弹回去
下拉刷新默认是不开启的，那就是页面自己的弹性滚动，感觉还不错
开启的话window加上enablePullDownRefresh: true，page再加onPullDownRefresh
解决不回弹：
要不就是在onPullDownRefresh里面再初始化一次页面
要不就是加上wx.stopPullDownRefresh()
onPullDownRefresh() {
this.initPageData()
//去掉这个页面就不会弹过顶部，后又发现去掉initPageData里的ajax请求也可以；
//最后发现是http.js里wx.showLoading导致的
//那就想办法判断是否是下拉刷新触发的ajax，是就不loading
wx.stopPullDownRefresh();
//原来http.js在请求complete后有写这个，难怪上面那个有用，那就不用加这个了
}
//那就加个参数pullDown来判断，true表示来自下拉刷新
//一开始想到在ajax与url平级的地方加这个pullDown，然后在下拉里加个参数
onPullDownRefresh(){
this.initPageData(true)
}
initPageData(pullDown){
this.$get({
url: '***/today/list',
pullDown:pullDown||false
}。。。
}
//上面办法每个页面改动较大
//可以在globalData加个全局变量isPullDown；
//然后在http.js里面获取this.$root.$parent.globalData.isPullDown
//在onPullDownRefresh设置isPullDown为true，然后延迟100ms再设为false
//要保证在这100ms内由下拉刷新引起的ajax都要触发，设为true操作是异步应该不要紧，除非有的ajax也有setTimeout
onPullDownRefresh() {
this.$root.$parent.globalData.isPullDown = true
setTimeout(()=>{
this.$root.$parent.globalData.isPullDown = false
this.$apply()
},100)
this.initPageData()
}
2018年5月10日 22:30:48 解决下拉不流畅最终方案
关键点：由于下拉刷新时有ajax，又触发了wx.showLoading导致的,方案为在ajax里判断是否处于下拉刷新的状态
然后再封装一下放到公共base.js里，页面引用下就都可以用了
后将变量名改为hideWXLoading，函数名改为setHideWXLoading
是为了方便用到其他也要隐藏微信loading的地方，如购物车加减后会出现两次
//设置隐藏微信的loading
setHideWXLoading(){
this.$root.$parent.globalData.hideWXLoading = true
setTimeout(()=>{
this.$root.$parent.globalData.hideWXLoading = false
this.$apply()
},500)
}
只需要改为
onPullDownRefresh() {
this.setHideWXLoading()
this.initPageData()
}
暂时不知道如何统一设置所有页面的onPullDownRefresh
我看京东小程序的下拉的那三个点是由小变大的，微信默认的没有大小变化
我怀疑京东的下拉刷新的弹性效果是自己单独写的，找找看有没有这样的库
找到个 微信小程序动画能力研究（踩坑、iscroll源码解读）
test({aa=22}){
console.log(aa)
}
参数为对象的话就不能传空了
this.test({})
- 下拉后未等页面会弹点了其他页面再回到上个页面，一直处于下拉刷新的状态，不自动恢复
- wx.getUserInfo()注意：此接口有调整，使用该接口将不再出现授权弹窗，请使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作
可以考虑一进去弹一个自己的弹窗，让用户点了去获取授权
后发现可用open-data去直接拿到头像和昵称，获取token的流程不变，==那还要getUserInfo干啥==，那些用户信息都能直接用了
所以先把之前获取用户信息的代码去掉，放在这防止以后有用
// 获取用户信息
getUserInfo(cb){
let that = this
wx.getUserInfo({
success:function(res) {
cb(res)
},
fail:function(){
wx.getSetting({
success: (res) => {
if(res.authSetting['scope.userInfo']){
wx.getUserInfo({
success: function(res) {
cb(res)
}
})
}else{
wx.showModal({
title: '',
content: '检测到您未打开微信用户信息授权，开启后即可进行下一步操作',
success: function(res) {
if (res.confirm) {
wx.openSetting({
success: (res) => {
that.getUserInfo(cb)
}
})
}
}
})
}
}
})
}
})
}
//在initPageData中
that.getUserInfo(function(res){
let userInfo = res.userInfo
that.userAvatar = userInfo.avatarUrl
that.userName = userInfo.nickName
that.$apply()
})
需要改进
- 需要多试试小程序的功能，如模版消息、客服对话等
- 了解小电铺、微盟等小程序服务商，看他们是如何实现的，用户小程序的管理、支付等
- 尝试小游戏，乘着现在这股风
- 首页进去很慢
网友评论