uniapp打包成微信小程序注意点记录

目前测试的是打包成h5和微信小程序的注意点：

 

1. 样式需要规矩一点（对于微信小程序），不能有*这种和*:first-child这种修饰符存在。需要.class这种，对于组建标签上定义类值也不可以

2. 微信小程序对于v-show可能会无效果，v-show替换成v-if

3. 对于intersection obseve这个api，需要用uni.createIntersectionObserver，对于微信小程序监听的dom需要是普通标签（view）不能是loadmore这种组建上定义类值

4. 微信小程序无法用dom和bom，如果要获取屏幕宽高，需要用uniapp提供的方式，页面需要用到值，可以用混入方式搞（要效率可以在app.vue中）

export default{
  data(){
    return {
      windowWidth: 375,
      windowHeight: 600,
    }
  },
  methods: {

  },
  created(){
    uni.getSystemInfo({ 
      success: (res) => {
        this.windowWidth = res.windowWidth
        this.windowHeight = res.windowHeight
      }
    })
    uni.onWindowResize((res) => {
      this.windowWidth = res.size.windowWidth
      this.windowHeight = res.size.windowHeight
    })
  }
}

5. static里只存放tabbar的icon，其他图片放到云存储上（要有域名）（前期也可都放在本地先，上线时候搞到线上，批量修改下路径也可）

6. manifest.json配置、package.json配置

"mp-weixin": { /* 微信小程序特有相关 */
        "appid": "wx7fe94a47f614e38a",
        "setting": {
            "urlCheck": false,
            "es6": true,
            "minified": true
        },
        "usingComponents": true,
        "lazyCodeLoading": "requiredComponents",
        "optimization": {
            "subPackages": true
        }
    },

"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --minimize",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",

// --minimize，uniapp打包成微信小程序时候对js进行压缩（实测我的降低了800KB）

7. css定义图片样式，需要宽高都定义，如果只定义了宽，h5是正常的，微信小程序图片会特别长，微信小程序不能定义background-img

8. 微信小程序使用axios会报错(t is not a function,dispatchRequest.js:58) ,需要使用uniapp提供的请求方式

// uniapp自带的请求封装
export default (url, data, method="POST") => {
  return new Promise((resolve, reject)=>{
    uni.request({
      url: baseURL + url,
      data,
      method,
      header:{
        'X-Access-Token': Store.state.user.token,
  
      },
      success(res){
        // console.log("request sucess", res)
        // token失效
        if (res.statusCode === 401){
          console.log('token 失效.')
          Router.push({name: 'login'})
          Store.commit('clearUserInfo')
          return
        }
        resolve(res.data)
      },
      fail(err){
        // console.log("request err", err)
        reject(err)
      }
    })
  })
}

9. 微信小程序组件中slot不可以定义默认值。

10. 使用了uni-simple-router后，用户到首页无登录转到登录页，对于再到首页逻辑不同（微信小程序需要用back，h5用replace或push）

// 路由写法：跳转路由前拦截，没有登录，next到登录页

// #ifdef H5
this.$Router.replace({name: 'index'})
// #endif
// #ifdef MP-WEIXIN
this.$Router.back()
// #endif