小程序相关

[5Mi]

使用uniapp注意

参考

• 小程序

• uniapp

• uni-ui

• Vant Weapp commit id dbe94b3bfa886ad594b00831674691dff076e128

• 小程序 订阅消息

  安全域名设置，在“设置” -> “开发设置”中设置request合法域名

注意

• 基础库版本设置: 登录小程序管理后台，进入“设置->基本设置->基础库最低版本设置”进行配置。
• 引用小程序原生组件可在标签上使用ref="some",用this.$refs.some来获取
• App.vue中对应小程序全局生命周期,其中无法取得Vue实例(可使用globalData或引入store来传递数据)
• request 合法域名
  • 字体安全域名
  • https://apis.map.qq.com腾讯地图等第三方
  • 静态资源(图片$BASEURL),upload 相关: 接口(upLoadUrl),资源(图片,视频)
• 入口页面需等待App.vue初始化完成await onLaunchPromise 其中import { onLaunchPromise } from '@/util/helper'可在入口隐藏返回首页按钮uni.hideHomeButton()
• 对于小程序，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中获取场景值, 值得一提的是其中 onShow方法返回的场景值会随场景相应变化(搜索小程序进入,小程序进程仍存在,再通过公众号菜单进入,触发app的onshow,返回的场景值会改变)
• 小程序发布,右上角打开调试后 可不校验请求域名

坑

• 关于page.json的修改经常不能热更新,或在微信开发者工具报错,需重新npm run dev:mp-weixin

• 不确定:uniapp 循环回调有 bug 通过 :data-index="index" 迂回处理

• 当需要在 vue 组件(components 文件夹下)中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置 (页面级别则可在各 page 字段的 usingComponents 配置)

• uniapp 中 vue 全局组件好像只能在 main.js 中注册 https://ask.dcloud.net.cn/article/35699

• uniapp 中不适用,组件的 v-model 仅支持 value-input

    // vue 改这种 checked-change 则不支持
    model: {
      prop: 'checked',
      event: 'change'
    },

• uni.scss 会在构建后生成的各个样式文件中被重复引用(webpack 样式 loader 的 prependData) 所以不要在此处引用有产出公共样式(仅引用_variables,_mixin 等),将有产出的公共样式放在 App.vue style中

• <app-agreement class="agreement_comp" v-model="agreement"></app-agreement>自定义组件在小程序中会生成相应组件标签(如此处的<app-agreement></app-agreement>)而不是渲染成组件的根节点

• vant weapp 组件中事件回调参数 在回调参数的 detail 字段下

• css 变量在取 scss 变量值时用插值

  page {
    --picker-action-text-color: #{$theme-color};
  }

• 小程序组件样式隔离 ,自定义组件内修改 vant 组件样式

    // vue自定义组件内直接加
    options: {
      styleIsolation: 'shared'
    },

• 小程序原生组件层级穿透 (textarea 通过 foucs,blur 切换 textarea 和 view 显示, 达到可覆盖 textarea)

• 自定义 vue 组件没有 页面级,应用级 生命周期,使用 vue 生命周期

• 小程序 wx.request 无论返回什么 http 状态码，都会走 success 回调

  当我们遇到断网，域名解析有问题，或者尤其是我们去调用 restful api 时，可能会在 url 格式，参数类型上出些问题，这些情况下才会调用到 fail

• 小程序请求 content-type 默认为 application/json

• 作用域插槽中访问不到父组件属性,方法可绑定

• 默认插槽也要用v-slot:default否则有时会不渲染作用域中的值

• toast 一闪而过 wx.hideLoading 会关闭同级中的 wx.showLoading 或 wx.showToast 所以要在 showToast 之前调用 wx.hideLoading

• 在 v-show 切换中的两个scroll-view,不知为何后展示的无法下拉刷新,需要将两个scroll-view同时添加:refresherEnabled=" v-show的条件 "

• 虽然官网文档没有说明，但调用 wx.requestSubscribeMessage 授权之前是不能有异步操作的，否则会报错，提示你授权不是通过 bindtap 事件触发的，这个真的是无敌坑，只能自己在初始化或者登录后去先调用了获取模板 ID 的接口，然后把它缓存下来；

• Vue props传入的function中的this指向
  如果父组件传入子组件的function是定义在methods中的方法，发现子组件调用此方法时方法内部的this指向子组件

  // 父组件methods中方法 通过props传给子组件
  fetchActivityFn(params) {
        // 此处this指向子组件, 想使用父组件this则this.$parent
        console.log(this, this.$parent)
        const tabType = this.$parent.tabType
        console.log({
          ...params,
          type: tabType
        })
      }

  尝试使用箭头函数的方式 fetchActivityFn:()=>{console.log(this)} 但此时this为undefined