⼩程序项⽬开发经验总结
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,
})
}
})
}
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地址，且对应地址下要配置有相应的证书
合法域名：对应⽹络请求的合法地址，只要⾛⽹络请求就需要配置。
打印机安装驱动
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论