小程序初体验总结,总算是从坑里爬出来了,望大家斧正不足之处。
在h5运行vant-weapp
无法获取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在小程序端不可用