多端开发规范及注意事项

2023-03-08 14:58:43 阅读:1 编辑

区别不同的端

  1. !app_type 为小程序端
  2. app_type == 'wechat' 为公众号或h5端
  3. app_type == 'app' 为android或ios
  4. app_type == 'wechat' && isH5 仅为h5端

wxml上使用

wx:if="{{app_type != 'app'}}"

js使用

 if (app.app_type == "wechat") {

    } 

判断仅为android端

 if (app.app_type == "app" && wx.isAnroid()) {

    } 

H5与APP端部分

  1. 由于H5与APP端的js部分使用是vue的底层,使用wxml中有使用的变量要在data中定义,不然容易报错
  2. wxml中的多级对象判断
  3. 定义类名禁止一个标签出现两个class来定义类名
  4. data与函数名不能重复

错误:

<view wx:if="a.b==1" /></view>

正确:

<view wx:if="a && a.b==1" /></view>
  1. canvas组件中canvas-id属性值不能为变量,只能为固定字符串
  2. canvas组件要在构造后才能使用
    this.$nextTick(()=>{
    const ctx = wx.createCanvasContext(el, this);
    });

APP端

CSS样式

  1. 不支持百分号%,需改写成常量数 app不支持%,有时为了效果,可以针对app端都特别处理(小程序与h5端用%,app端不用%)
  2. margin不支持负数
  3. 行内样式尽可能保持简单的语法,编译器不能保证都能编译
  4. 不支持Display属性,隐藏显示请使用wx:if来代替
  5. 不支持z-index属性,越靠后写的展示在最上层
  6. 不支持伪类
  7. 不支持auto关键字
  8. 不支持float浮动布局,只支持flex布局
  9. input组件需设置宽度
  10. 不支持background-image --背景图 要使用包一层的方式
  11. text组件不能CSS样式position不能设定为fixed;
  12. 不要用!important 写样式

JS

  1. Page以外的变量不能直接引用wx方法
  2. API不支持:微信收货地址;授权手机号

富文本的使用

使用富文本 WxParse组件的时候 v-html是提供给h5端使用。

<template v-html="deposit_rule" is="wxParse" data="{{wxParseData:detail.nodes}}" />

弹窗的使用

换行的问题

css变量问题

设置上级页面内容

h5端

若该页面需缓存返回页面时该页免不刷新需在 .json文件加 keepAlive: true;

开发规范将不断完善中。。。