1. 小程序授权
问题：新版小程序使用getUserInfo不再主动调出授权弹窗了，需要小程序主动引导用户申请授权，使用<button open-type="getUserInfo">授个权</button>按钮申请授权,参考微信小程序授权登录
思路：
- 第一步：用户在进入微信小程序首页时，需要调用wx.getSetting()方法判断用户是否授权了。
- 第二步：1、如果上面的方法判断用户已经授权了，则继续小程序的正常操。2、如果未被授权，则跳转到自定义的授权页面。
- 第三步：点击自定义授权页面的授权按钮，出现授权弹窗，弹窗中包括“拒绝”与“允许”两种操作 。当我们点击“拒绝”时，说明我们拒绝授权了，继续保留自定义的授权提示页面，不允许继续跳到小程序其他页面，直到你允许授权为止。当点击“允许”按钮时，则跳到小程序首页。
- wx.getSetting查看是否授权
<!-- 如果只是展示用户头像昵称，可以使用 <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() {
// 查看是否授权
wx.getSetting({
success (res){
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.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();
if(res.code===0){
let data = res.data;
wx.requestPayment({
'timeStamp': data.timeStamp,
'nonceStr': data.nonceStr,
'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 = res.errMsg;
console.log('支付失败'+errMsg)
let yxddlsh=data.yxddlsh;
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是在组件内，所以应该使用
this.createSelectorQuery() - 应用场景：【首页公告栏】通过获取元素真实宽度来做横向滚动的公告栏
let totalWidth=0;
let _this = this;
this.createSelectorQuery().selectAll('.broad-item').boundingClientRect().exec(res=>{
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()可以获取到小程序来源 - 通过模拟编译场景来设置首次进入小程序内页时，
场景来源为公众号
- 公众号部分：
- 通过自定义菜单添加小程序对应内容页
------------------------------ 一条分割线--------------------------------
小程序wev-view接入H5中引用高德地图API做的地图
- 场景：因为时间关系，项目中原生app端，小程序端都需要引入一个自助终端机定位及路径导航功能，所以统一以web-view的方式引入H5
- 小程序的限制： 生产环境中小程序是会校验
业务域名，合法域名，以及Https证书的，所以高德的API域名https://webapi.amap.com默认情况下是不能访问的 - 解决：在小程序管理后台，添加高德API为
合法域名即可。（哈哈哈，就这么简单，之前想复杂了，想着添加业务域名，而业务域名实际上还需要在对应地址处放微信证书。） 业务域名：对应wev-view可以请求的合法H5地址，且对应地址下要配置有相应的微信证书合法域名：对应网络请求的合法地址，只要走网络请求就需要配置。
