⼩程序项⽬开发经验总结
1. ⼩程序授权
问题:新版⼩程序使⽤getUserInfo不再主动调出授权弹窗了,需要⼩程序主动引导⽤户申请授权,使⽤<button open-type="getUserInfo">授个权</button>按钮申请授权,参考
思路:
第⼀步:⽤户在进⼊⼩程序⾸页时,需要调⽤wx.getSetting()⽅法判断⽤户是否授权了。
第⼆步:1、如果上⾯的⽅法判断⽤户已经授权了,则继续⼩程序的正常操。2、如果未被授权,则跳转到⾃定义的授权页⾯。
第三步:点击⾃定义授权页⾯的授权按钮,出现授权弹窗,弹窗中包括“拒绝”与“允许”两种操作 。当我们点击“拒绝”时,说明我们拒绝授权了,继续保留⾃定义的授权提⽰页⾯,不允许继续跳到⼩程序其他页⾯,直到你允许授权为⽌。当点击“允许”按钮时,则跳到⼩程序⾸页。
<!-- 如果只是展⽰⽤户头像昵称,可以使⽤ <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使⽤ button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级版本</view>
// ... script
何政军图片onLoad: function() {
// 查看是否授权
success (res){
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调⽤ getUserInfo 获取头像昵称
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
错误1:中button绑定事件使⽤的是bindgetuserinfo,在uni-app中使⽤@getuserinfo
2. ⼩程序中的ajax请求
使⽤的是⽹友提供的uni-request包,类似axios的基于Promise的请求,空闲时可以研究下别⼈怎么封装ajax的
3. 获取⽤户openId传给后台登录
通过wx.login获取到⽤户登录信息,后台通过返回的code来登录本应⽤服务
3. ⼩程序中e.target和e.currentTarget的区别
在⼩程序中事件分为冒泡和不冒泡,⽽tap是冒泡事件,它的触发时,可能会有不同
e.target是tap点击事件触发的对象(也就是点击的是谁)
e.currentTarget是事件绑定在哪个元素上(也就是这个事件在哪个组件上)。
4. 发起⽀付
发起流程: 程序请求后端接⼝–》由后端⽣成交易单号等–》前端拿到接⼝返回后–》发起⽀付wx.requestPayment
// 发起⽀付
export function wxPay(params,callback){
let postData=params.postData;
帮派名称离婚了户口可以独立吗uni.showLoading();
applyPay(postData).then(res=>{
uni.hideLoading();
de===0){
let data = res.data;
'timeStamp': data.timeStamp,
'nonceStr': Str,
'package': data.package,
'signType': data.signType,
'paySign': data.paySign,
'success':function(res){
console.log('⽀付成功')
typeof params.success==='function' &¶ms.success(data);
},
'fail':function(res){
let errMsg = Msg;
console.log('⽀付失败'+errMsg)
let ddlsh;
params.fail==='function' &¶ms.fail(data)
unLockBill(yxddlsh);
}
})
}else{
uni.showToast({
title:'⽀付申请失败,请联系管理员解锁账单',
icon:'none',
duration:2000,
})
}
安装itudou
})
}
李玟资料5. 发布体验
⼩程序发布体验包时,体验⼩程序所有接⼝请求都没有发出。
解决: 1. ⼩程序要打开调试模式才能正常访问⽹络请求。不打开会默认校验安全域名 2. API接⼝请求域名必须是Https,且加⼊到了合法域名中
注意:⼩程序的vConsole中,没有network模块,⽆法查看⽹络请求
6. ⼩程序中图⽚
设置了widthFix的图⽚,在每次进⼊界⾯时都会先拉长,再恢复正常
给图⽚设置⼀个⾼度,如hight:auto
7. ⼩程序操作元素节点
⼩程序官⽅的API获取节点是通过wx.createSelectorQuery()。,但问题是通过这个⽅法,拿不到元素。
解决:因为是通过uni-app来开发的,且调⽤API是在组件内,所以应该使⽤ateSelectorQuery()
应⽤场景:【⾸页公告栏】通过获取元素真实宽度来做横向滚动的公告栏
let totalWidth=0;
let _this =this;
res[0].forEach(item=>{
totalWidth+=item.width;
})
_this.scrollStyle =`width:${totalWidth}px;animation:noticeBar ${totalWidth /this.speed}s linear infinite
both`;
})
8. ⼩程序中scroll-top⽆效
需求:⾸页公告那⼉,需要通过点击进⼊到公告列表时,能⾃动定位到那条消息
问题:使⽤scroll-view组件,加scroll-top或scroll-into-view属性来定位时,⽆效。
解决:scroll-view需要设置固定⾼度
9. IOS中position:fixed的底部tabbar⽆法正常显⽰
原因:动态显⽰底部tabbar的图⽚引起的IOS渲染问题,跟⼩程序的scroll-view组件也有关系
解决:使⽤背景图的⽅式来代替控制图⽚元素显隐,并设置fixed元素不在scroll-view元素内部。
10. 关于⼩程序⾃定义tabBar的问题
为什么不⽤⼩程序⾃带的tabBar配置??
⼩程序⾃带的配置tabBar,icon图标不⽀持SVG等图,且不⽀持⾃定义⼤⼩
⽅案
配置⼀个⼩程序的tabBar,也⾃定⼀个tabar组件在界⾯上,通过hideTabBar隐藏⼩程序tabBar,通过switchTabBar实现⼩程序⾃带tabBar的切换效果,从⽽兼得两种功能。
11. 测试跳转⼩程序内页功能
通过wx.getLaunchOptionsSync()可以获取到⼩程序来源
通过模拟编译场景来设置⾸次进⼊⼩程序内页时,场景来源为
部分:
按揭买房流程1. 通过⾃定义菜单添加⼩程序对应内容页
------------------------------ ⼀条分割线--------------------------------
⼩程序wev-view接⼊H5中引⽤⾼德地图API做的地图
场景:因为时间关系,项⽬中原⽣app端,⼩程序端都需要引⼊⼀个⾃助终端机定位及路径导航功能,所以统⼀以web-view的⽅式引⼊H5
⼩程序的限制: ⽣产环境中⼩程序是会校验 业务域名,合法域名,以及Https证书的,所以⾼德的API域名webapi.amap默认情况下是不能访问的
解决:在⼩程序管理后台,添加⾼德API为合法域名即可。(哈哈哈,就这么简单,之前想复杂了,想着添加业务域名,⽽业务域名实际上还需要在对应地址处放证书。)
业务域名:对应wev-view可以请求的合法H5地址,且对应地址下要配置有相应的证书
合法域名:对应⽹络请求的合法地址,只要⾛⽹络请求就需要配置。
发布评论