小程序项目开发经验总结

1. 小程序授权

问题：新版小程序使用getUserInfo不再主动调出授权弹窗了，需要小程序主动引导用户申请授权，使用授个权按钮申请授权,参考微信小程序授权登录

思路：

• 第一步：用户在进入微信小程序首页时，需要调用wx.getSetting()方法判断用户是否授权了。
• 第二步：1、如果上面的方法判断用户已经授权了，则继续小程序的正常操。2、如果未被授权，则跳转到自定义的授权页面。
• 第三步：点击自定义授权页面的授权按钮，出现授权弹窗，弹窗中包括“拒绝”与“允许”两种操作 。当我们点击“拒绝”时，说明我们拒绝授权了，继续保留自定义的授权提示页面，不允许继续跳到小程序其他页面，直到你允许授权为止。当点击“允许”按钮时，则跳到小程序首页。

• wx.getSetting查看是否授权

授权登录
请升级微信版本

// ... 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()可以获取到小程序来源
• 通过模拟编译场景来设置首次进入小程序内页时，场景来源为公众号
  
• 公众号部分：
  1. 通过自定义菜单添加小程序对应内容页

------------------------------ 一条分割线--------------------------------

小程序wev-view接入H5中引用高德地图API做的地图

• 场景：因为时间关系，项目中原生app端，小程序端都需要引入一个自助终端机定位及路径导航功能，所以统一以web-view的方式引入H5
• 小程序的限制： 生产环境中小程序是会校验 业务域名，合法域名，以及Https证书的，所以高德的API域名https://webapi.amap.com默认情况下是不能访问的
• 解决：在小程序管理后台，添加高德API为合法域名即可。（哈哈哈，就这么简单，之前想复杂了，想着添加业务域名，而业务域名实际上还需要在对应地址处放微信证书。）
• 业务域名：对应wev-view可以请求的合法H5地址，且对应地址下要配置有相应的微信证书
• 合法域名：对应网络请求的合法地址，只要走网络请求就需要配置。