一、技术栈
taro + react + taro-ui + mobx
最初因为内嵌有h5页面，h5是vue开发的，故选择了taro的vue版本进行开发。但是后续问了小程序开发经验丰富的同学，他说vue版的容易出问题，建议还是使用react版本的taro开发小程序。我就去网上查了下资料，还真是如此。官方虽然对vue，react语法都支持，但是其状态管理setData的设计思路明显更偏向于react，整理的设计思路更适合react。所以我们的项目最后将语法转换为了react版本的。
二、遇到的问题
1.页面报错：一个页面只能允许一个web-view
image.png
web-view类似于pc端的iframe，可以将其他站点的内容直接嵌套到本地项目中使用。但是web-view会全屏展开，它不允许和其他内容同时显示。
最初，我把web-view和主页面的逻辑写一起，当没登录展示主页面逻辑，登录后，跳转到web-view页面
render(){
if(login){
return <WebView src='https://www.baidu.com' />
}
return <View>登录逻辑</View>
}
这样写页面有些逻辑更改，导致setState变更时候，会导致页面重新渲染，这样页面就报错一个页面只能插入一个web-view。
于是转换思路，将web-view单独抽离出来写成一个页面，这个问题就迎刃而解啦，如下
//login.js
if(this.token){ //如果获取到了token就跳转到web-view页面
Taro.redirectTo({
url: `/pages/webView/index?token=${this.token}`
})
}
//webView.js
render(){
return <View>
<WebView src='https://www.baidu.com' />
</View>
}
2.上线后web-view内容频繁白屏
本地真机联调，预览和体验版本都没有问题，但是提交审核通过发布后的版本，会频繁白屏。这种本地没法复现的bug，只能通过其他途径解决了。
第一：先看看出问题的手机型号及微信版本号，在到对应的小程序开发工具上调试到对应版本看看能否复现问题。
image.png
第二：看看web-view的src是否的拼接而成。
若是拼接的，可能会导致部分手机白屏，我之前的src是用 src + token拼接而成的。解决思路如下：
// store
import {observable } from "mobx";
export class WXLoginClass {
@observable src=''
@observable localSrc=''
@observable isShowWebView=false
changeSrc(src){
this.src = src
this.localSrc = src
this.isShowWebView = true
}
hideWebView(){
this.src = ''
this.localSrc = ''
this.isShowWebView = false
}
}
export default new WXLoginClass();
// webview.js
import { Component } from 'react'
import { WebView,View} from '@tarojs/components'
import { observer,inject } from 'mobx-react'
@inject('webViewStore')
@observer
class Index extends Component {
myTimeId = null
componentWillMount(){
// 进页面前先清空数据
this.props.webViewStore.hideWebView()
}
onLoad(options){ // 第一次进入这个页面时候 调用，第二次不会调用
let src = `https://www.baidu.com`
if(obj.token){ // obj.token是自己获取的token
src = src + `?token=${obj.token}`
}
this.myTimeId = setTimeout(()=>{
this.props.webViewStore.changeSrc(src)
},0)
}
componentWillUnmount(){ //组件销毁时候清空定时器
clearTimeout(this.myTimeId)
}
render () {
let {src,isShowWebView} = this.props.webViewStore
return <View>
{
isShowWebView &&
<WebView src={src} onMessage={this.shareTheProject.bind(this)}/>
}
</View>
}
}
export default Index
这样就解决了安卓机上web-view内嵌页面白屏的bug。
3.web-view内部h5页面触发右上角分享逻辑
因为内嵌页面是H5页面，没法直接触发微信小程序的api，但是小程序里提供了web-view分享的方法。
h5页面的入口index.html里引入js,router里写逻辑
//index.html
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
//h5里面的router.js
router.beforeEach(async (to, from, next) => {
wx.miniProgram.postMessage({data:{ url: to.path ,name:to.meta}})
.....
next()
})
web-view页面写分享的逻辑
当web-view里的页面点击右上角的分享按钮时候，会触发onMessage 里的shareTheProject函数,这个函数能拿到当前转发的页面路径url和当前页面的名称name，然后触发webView.js里的分享逻辑onShareAppMessage，可以在这个函数里写转发的路径，和要传递的参数。若是有转发成功后要处理的逻辑，可以写在success这个回调里。
// store
import {observable } from "mobx";
export class WXLoginClass {
@observable shareObj = {} //分享的对象
changeShareInfo(e){
this.shareObj = e.detail.data[e.detail.data.length - 1]
let url = this.shareObj.url
// url路径里若是有token要去除
url = url.includes('?token') ? url.split('?token')[0]:url
this.shareObj.url = url
}
}
export default new WXLoginClass();
// webview.js
@inject('webViewStore')
@observer
class Index extends Component {
shareTheProject(e) {
this.props.webViewStore.changeShareInfo(e)
}
onShareAppMessage(options) { //转发时执行
return {
title: '转发的主题',
path：'/pages/index/index?value=123&share=true',//小程序向h5传递参数
success(e) {
wx.showShareMenu({
// 要求小程序返回分享目标信息
withShareTicket: true
});
},
}
}
render () {
return <View>
<WebView src='https://www.baidu.com' onMessage={this.shareTheProject.bind(this)}/>
</View>
}
}
export default Index
4. getStorage首次获取数据不生效
当你后面的操作必须依赖于storage的数据，这时候就需要使用存储的api。直接使用setStorage，第一次获取数据获取不到，就是因为这个api是异步的。若要每次都能获取到数据，则需要使用同步存储的api setStorageSync，使用方法如下：
// 异步存储
Taro.setStorage({
key:"key",
data:"value"
})
// 获取异步存储
Taro.getStorage({
key: 'key',
success: function (res) {
console.log(res.data)
}
})
// 同步存储
try {
//同步和异步不同，同步是对象，异步直接是key，value
Taro.setStorageSync('key', 'value')
} catch (e) { }
// 获取同步存储
try {
var value = Taro.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
两者的区别：
异步就是不管保没保存成功,程序都会继续往下执行。同步是保存成功了,才会执行下面的代码.
使用异步,性能会更好;而使用同步,数据会更安全
5.小程序-高德地图定位的使用
微信小程序|高德地图api官网
第一步：去官网注册获取个key
第二步：获取地址，按官网提示一步步来操作即可。
获取地址
class Index extends Component {
state = {
gaodeMapAds: '', // 高德地图的位置
}
componentWillMount(){
// 自动获取定位
this.onLoadAddress()
}
//高德地图获取 地理位置
onLoadAddress() {
let that = this;
//ADDRESS_KEY 是申请的高德地图的key
let myAmapFun = new amapFile.AMapWX({key:ADDRESS_KEY});
myAmapFun.getRegeo({
success: function(data){ //成功回调
let res = data[0] && data[0].regeocodeData.addressComponent
res.formatted_address = data[0] && data[0].regeocodeData.formatted_address
let {province,city,district} = res
if(typeof city === 'object'){
city = province.substr(0,2) + '城区'
}
that.setState({
gaodeMapAds:`${province} ${city} ${district}`
})
},
fail: function(info){
// wx.onLocationChange
//失败回调
console.log(info)
}
})
}
render () {
const {gaodeMapAds} = this.state
return (
<View className='index'>
<AtInput
editable={false}
title='地理位置:'
value={gaodeMapAds}
> </AtInput>
</View>
)
}
}
export default Index
调取获取定位的接口返回的结果如下：
image.png
如要获取省市区的code，直接从regeocode.addressComponent.adcode字段获取。
// 省份的code
provinceCode = parseInt(adcode / 1000) * 1000 + ''
// 城市的code
citysCode = parseInt(adcode / 100) * 100 + ''
//区域的code
areasCode = adcode
6.picker省市区位置选择器
微信小程序提供了省市区选择器picker，只需要设置picker的mode属性为'region'，省市区的内容就会自动填充。
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
picker
具体使用说明可参考微信小程序picker使用说明
若对省市区没有特别要求，直接用微信提供的api即可。但是我们对省市区有特殊要求，需从接口获取省市区数据，因此这个mode='region' 属性不可用，需使用mode='multiSelector'属性。
这里需要注意的是，我们限制了用户必须省市区都要选中才行，因为若不满足条件就给出提示，但是因为picker点击确定就会关闭弹框没有阻止弹框关闭的api，所以这里一定要记录你上次选中的数据，在数据不满足条件弹框关闭时候，根据上次记录的数据恢复省市区的数据和上次选中数据的坐标，确保用户下次再打开弹框时候，选中的是上次的数据。
// store.js
import Taro from "@tarojs/taro";
import { observable } from "mobx";
import { WXRequest } from '../pages/api/request';
// 获取省市区接口的封装
import {getProvinces, getCities, getDistrict} from '../pages/api/buss'
export class WXLoginClass {
@observable province = ''
@observable city = ''
@observable area = ''
@observable provinces =[]
@observable citys = []
@observable areas = []
@observable value = [0, 0, 0]
// 三级地址
@observable.shallow ranges = [[], [], []]
nextSureVal = [0, 0, 0]
async addressChange() {
let newarr = [],newNameArr =[]
let res = await getProvinces();
if (res.code == 200) {
for (let i = 0; i < res.data.length; i++) {
const resItem = res.data[i]
const item = {
name: resItem.name,
value: resItem.citycode,
}
newarr.push(item)
newNameArr.push(resItem.name)
}
this.ranges[0] = [...newNameArr]
this.provinces = [...newarr]
const cityCode = res.data[0] && res.data[0].citycode
if(!cityCode) {
this.citys = []
this.ranges[1] = []
this.areas = []
this.ranges[2] = []
return
}
await this.getCities(cityCode)
}
}
async getCities(id){
if(!id) {
this.ranges[1] = []
return
}
let res = await getCities(id)
let newarr = [],newNameArr =[]
this.citys = []
this.ranges[1] = []
if (res.code == 200) {
for (let i = 0; i < res.data.length; i++) {
const resItem = res.data[i]
const item = {
name: resItem.name,
value: resItem.citycode,
}
newarr.push(item)
newNameArr.push(resItem.name)
}
this.ranges[1] = ['请选择',...newNameArr]
this.citys = [option,...newarr]
}
}
async getDistrict(id){
if(!id) {
this.ranges[2] = []
return
}
let res = await getDistrict(id)
let newarr = [],newNameArr =[]
this.areas = []
this.ranges[2] = []
if (res.code == 200) {
for (let i = 0; i < res.data.length; i++) {
const resItem = res.data[i]
const item = {
name: resItem.name,
value: resItem.citycode,
}
newarr.push(item)
newNameArr.push(resItem.name)
}
this.ranges[2] = ['请选择',...newNameArr]
this.areas = [option,...newarr]
}
}
async columnChange(e) {
const { provinces, citys, value } = this
const column = e.detail.column
const evalue = e.detail.value
let provinceNum = value[0]
let cityNum = value[1]
let countyNum = value[2]
// 记录上次的位置
if (column == 0) { //选则了省份
provinceNum = evalue
const id = provinces[provinceNum].value
await this.getCities(id)
this.areas = []
this.ranges[2] = []
this.value = [provinceNum, 0, 0]
} else if (column == 1) { //选则了城市
cityNum = evalue
const id = citys[cityNum].value
this.getDistrict(id)
this.value = [provinceNum, cityNum, 0]
} else {
// 滑动选择了区
countyNum = evalue
this.value = [provinceNum, cityNum, countyNum]
}
}
// 不合乎规范或者取消时候，让rang和value的值都复原到上一次的状态
async handlePickerHide(){
const {provinces, citys, areas} = this
this.value = this.nextSureVal
const idCity = provinces[this.value[0]].value
const eareCity = citys[this.value[1]].value
idCity ? await this.getCities(idCity) : null
eareCity ? await this.getDistrict(eareCity) : null
}
// params true代表传递地址，false不传递
async handlePickerShow(params: boolean) {
const changeVal = params.detail.value
const { provinces, citys, areas, value } = this
if (params) {
const p = provinces[value[0]] && provinces[value[0]].name
const c = citys[value[1]] && citys[value[1]].name
if(c==='请选择') { //city必须有
Taro.showToast({
title:'城市必须选择',
duration:2000, // 持续时间
icon:'none',// 'success'、'loading'、'none'
mask:false, //是否显示透明蒙层，防止触摸穿透
})
this.value = this.nextSureVal
const idCity = this.provinces[this.value[0]].value
if(idCity){
await this.getCities(idCity)
}
const eareCity = this.citys[this.value[1]].value
if(eareCity){
await this.getDistrict(eareCity)
}
return
}
let a = areas[value[2]] && areas[value[2]].name
if(!a || a === '请选择') {
Taro.showToast({
title:'区域必须选择',
duration:2000, // 持续时间
icon:'none',// 'success'、'loading'、'none'
mask:false, //是否显示透明蒙层，防止触摸穿透
})
this.value = this.nextSureVal
const eareCity = this.citys[this.value[1]].value
if(eareCity){
this.getDistrict(eareCity)
}
return
}
this.isAmapAddress = false //用户手动选择地址
this.province = p || ''
this.city = c || ''
this.area = a || ''
this.nextSureVal = this.value
}
}
}
export default new WXLoginClass();
// picker.js
@inject('Login')
@observer
class MyPicker extends Component {
componentWillMount(){
// 省份信息可以异步就获取
this.props.Login.addressChange()
}
// 位置滑动触发
columnChange(e) {
this.props.Login.columnChange(e)
}
// 点击确定时候触发 params true代表传递地址，false不传递
handlePickerShow(params: boolean) {
this.props.Login.handlePickerShow(params)
}
handlePickerHide(){
this.props.Login.handlePickerHide()
}
render() {
let {ranges,value} = this.props
ranges = ranges.slice()
value = value.slice()
return (
<View className='mypicker' >
<picker
mode='multiSelector'
range={ranges}
value = {value}
onChange={this.handlePickerShow.bind(this)}
onColumnChange={this.columnChange.bind(this)}
onCancel = {this.handlePickerHide.bind(this)}
>
<View>
<AtIcon value='add-circle' size='20'></AtIcon>
</View>
</picker>
</View>
)
}
}
export default MyPicker
网友评论