小程序爬坑指北(uniapp版)

1,000 阅读2分钟
小程序初体验总结,总算是从坑里爬出来了,望大家斧正不足之处。

在h5运行vant-weapp

由于小程序组件缺少了部分依赖文件,需要下载目录下的文件,拷贝到wxcommponents/vant目录下,覆盖老的几个目录,再次编译

无法获取openid

在生产环境无法获取openid的问题:


在开发环境下,默认是不校验合法域名的,在生产环境下必会校验合法域名(如图配置)

所以我们需要根据报错信息配置合法域名才可以,但是。。。

好吧,去看下文档怎么说:

所以,前端不能保存AppSecret,也就是不能在前端直接通过路径拼接的形式获取openid
结论:通过后端配置appid、AppSecret获取openid。

uniapp数据存取

uniapp数据存储
uni.setStorage({ key: 'nickName', data: this.userInfo.nickName })
uniapp数据读取
uni.getStorageSync('openid')
uni.getStorage({ key:'avatarUrl', success(e) { self.avatarUrl = e.data } })

van-field无法实现双向数据绑定

van-field无法实现双向数据绑定,可使用blur替代实现,如此,在提交时建议加一些延时,避免在数据绑定之前提交引起报错

<van-field label="联系人姓名" :value="name" @blur="handleFieldChange" data-fieldName="name" placeholder="请输入联系人姓名" /> 
// 输入绑定             
handleFieldChange(e) {
    let fieldName = e.currentTarget.dataset.fieldname  this[fieldName] = e.detail.value
}

textarea层级问题

textarea为微信小程序原生组件,其层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,具体表现为textarea的placeholder与其内部的文本会穿透弹框


解决方法1:
使用小程序cover-view标签代替view标签解决(由于我使用的是vant weapp,cover-view无法嵌套进其内部组件,于是有了方法2)
解决方法2:
弹框弹出时type置为text,关闭时置为textarea,无效,需要后续调试
解决方法3:
写一个固定的文本view,可通过是否显示弹框,使用display控制textarea的显示隐藏(v-show在小程序端不可用),此方法会切换抖动,暂时无解。

<van-field label="备注描述" :class="{disN: fieldType === 'text'}" type="textarea" :value="project_remark" @blur="handleFieldChange" data-fieldName="project_remark" placeholder="请在此描述问题" autosize /> 
<view :class="[{disN: fieldType === 'textarea'}, 'discWrapper']"> 
    <text class="label">备注描述</text>     
    <view class="textarea">{{project_remark}}</view> 
</view>

文件上传、下载失败

需要配置上传、下载域名


其他

分页控件:uniapp使用mescroll-uni,不能使用mescroll-body,不然无法触发翻页函数
微信小程序获取用户授权需要一个按钮依托才可以弹出授权弹窗(wx.getUserInfo已废弃)
生命周期钩子无法在组件内触发,需要在其父组件触发钩子函数
小程序没有路由守卫的功能
小程序访问接口务必配置https域名
小程序没有document对象
v-show在小程序端不可用