Toggle Navigation
交流中心
话题
分享
手册
问答
公告
软件下载
登录
作者:linzhifeng@zhy
小程序、H5、App平台区分及H5常见错误解析
1年前 ⋅
0
### 平台区分 | | app.app_type | app.globalData.is_new_app | | :----: | :----: | :----: | | 小程序 | null | false | | H5/公众号 | wechat | false | | APP | null | true | #### 针对js文件: 使用**app.app_type**与**app.globalData.is_new_app**判断 例: ```js // js //只支持小程序 if(!app.app_type && !app.globalData.is_new_app){} //只支持H5/公众号 if(app.app_type=='wechat'){} //只支持APP if(app.globalData.is_new_app){} ``` #### 针对wxml文件: 使用**app_type**与**is_new_app**(js文件中需声明)判断 ```js // js data: { is_new_app:false, }, onLoad() { this.setData({ is_new_app:app.globalData.is_new_app, }) ``` 例: ```html
``` #### 使用场景举例: > - 转发 > - 订阅消息 > - 视频号 > - 其他针对平台的不同展示或功能 --- ### 页面转发多平台写法 ```js // js onShareAppMessage() { let title = '标题'; let path = '/pages/index/index'; if (app.globalData.is_new_app) { app.newappShare(title, path); } else { return { same_share: true, title, path, } } }, onShareTimeline() { return { same_share: true, title: '标题', query: 'id=1' }; }, ``` --- ### H5常见错误解析 - 在页面上使用对象较深层级的属性时,初始化没声明时,vue获取不到容易报错,建议写好初始值;例: ```html
{{a.b.c}}
``` ```js // js data:{ a:{ b:{ c:null } } } ``` - vue中组件对象属性与内部数据最好不要同一属性名,并且对外属性prop不允许内部改值,建议分开,例: ```js // js properties:{ title_a:'' } data:{ title_b:'' } onLoad(){ this.setData({ title_b:this.data.title_a + '标题' }) } ``` - 跨页面返回数据问题,比如在订单页跳转到选择地址,要把地址信息带回来。需配置json,例: 另一方案:使用缓存或全局对象。 ```js // 订单页json { "keepAlive": true, } ``` ```js // 地址页json { "changePrevious": true, } ``` ```js // 地址页js // 利用封装好的函数 this.setPrevData({ info, }) this.doPrevMethod('getDeliveryInfos'); ``` - vue中如果绑定事件处理器,一定要methods中定义,否则会报错;例 ```html
``` ```js // js onTapOne(e){} ``` - 不要绑定重复的事件,只有后面那个会生效;例: ```html
``` - 一些样式问题:文字过长没有进行处理和部分图片未设置宽高较多;其他看情况。 ```css /* wxss */ /* 单行省略号 */ width: 200rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 多行省略号 */ width: 200rpx; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; ``` - 组件结构与小程序不一致问题。比如:swiper swiper-item scroll-view; 一般均考虑做成2套方案,进行差异化处理。