小程序、H5、App平台区分及H5常见错误解析

### 平台区分

#### 针对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


<view wx:if="{{!app_type && !is_new_app}}"></view>

<view wx:if="{{app_type == 'wechat'}}"></view>

<view wx:if="{{is_new_app}}"></view>
```

#### 使用场景举例：
> - 转发
> - 订阅消息
> - 视频号
> - 其他针对平台的不同展示或功能

---

### 页面转发多平台写法
```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

<view>{{a.b.c}}</view>
```
```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

<view bindtap="onTapOne"></view>
```
```js
// js
onTapOne(e){}
```

- 不要绑定重复的事件，只有后面那个会生效;例：
```html

<view bindtap="onTapOne" bindtap="onTapTwo"></view>
```

- 一些样式问题：文字过长没有进行处理和部分图片未设置宽高较多；其他看情况。
```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套方案，进行差异化处理。