mpvue-小程序之蹲坑记

{{}} 双花括号的部分，直接编码到 wxml 文件中，小程序能力限制
• 小程序支持运算 三元运算
• 算数运算
• 逻辑判断
• 字符串运算 （+连接等）

vuex辅助函数mapState、mapGetters不可用

• Vue.prototype.$store = store

  
  子组件可通过

  this.$store

  使用

2. 规范

2.1. 变量绑定

使用 vue.js 规范

<!-- 小程序 -->
<view class="tab-item {{currentTab==0 ? 'on' : ''}}" >超然haha</view>
<view  current="{{currentTab}}"  style="height:{{currentTab==1?Height+'rpx':'100%'}}">超然haha</view>

<!-- vue.js -->
<view class="tab-item" :class="{'on': currentTab==0 ? true : false}" >超然haha</view>
<view  :current="currentTab"  :style="{'height':currentTab==1 ? Height+'rpx':'100%'}">超然haha</view>

2.1. 事件处理

小程序原生事件 ---> vue.js 规范

• 列表中没有的原生事件也可以使用例如

  bindregionchange

  事件直接在

  dom

  上将

  bind

  改为@

  @regionchange

  ,在监听此类事件的时候同时监听事件名和事件类型既

  <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>

• 不支持组件引用时原生事件

关于修饰符

• .stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！
• .prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面
• .capture 支持 1.0.9
• .self 没有可以判断的标识
• .once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑

3. 组件

3.1. 限制

• 只能使用单文件组件（.vue 组件）的形式进行支持 其他的诸如：动态组件，自定义 render，和

  <script type="text/x-template">

  字符串模版等都不支持

this.$root.$mp.appOptions

5. 生命周期问题

mpvue 是兼容微信小程序的生命周期与 vue 的生命周期，vue 实例会接管小程序 Page 实例的生命钩子，因此需要使用到小程序的生命周期钩子时，可将相应的钩子方法定义在 vue 实例中
如定义当前Page的分享标题内容图片：

new Vue({
data () {
return {
score: ''
}
},
onShareAppMessage (res) {
return {
title: '我获得 ' + this.score + ' 分，快来一起掌握基础音阶知识吧！',
path: '/pages/index/index',
imageUrl: 'https://wechat.dddog.com.cn/static/wescale.jpg'
}
}
})

小程序踩坑记

1. 组件

input, map, canvas, video, live-player,camera , textarea

2. 页面层级

小程序页面跳转打开最多五层，超出五层不会跳转了

3. 组件名

mpvue 组件名大写会提示，统一小写，警告信息如下：

4. 图片路径

• 相对路径图片不显示
  

  <img src="../../images/logo.png">

  解决方案：

  把路径

  import

  进来，或把图片放在 static 目录下

background-image

解决方案 外链

• base64 编码

  background-image: url('转换后的编码')
  
  <!-- 如果多次引用可将其设为全局变量，在js文件引用 -->

• 使用 image 组件，去掉背景图（可以使用相对路径）

5. wx.request post 方法失败

• wx.request

  post 方法参数传输失败

  wx.request

  post 的

  content-type

  默认为

  application/json

  
  如果服务器没有用到 json 解析，可以更改

  content-type

  为

  urlencoded

  wx.request({
  ...
  method: 'post',
  header: {
  'content-type': 'application/x-www-form-urlencoded'
  },
  ...
  })

6. 冷启动

小程序的机制，是在退出五分钟内进入，就会显示的是退出前的页面，如果你希望进入小程序都相当于冷启动的方式，直接进入主页面。你可以在page的onUnload里面里面set一个值，然后在app的onShow的时候判断这个值，然后决定是否跳到首页~

7. 录音管理相关

7.1 onPause

监听情况：

• pause 事件--手动

不能监听：

• 自然播放结束
• stop 事件--手动

7.2. 小程序实现语音流式识别

见博文-目前未更新： mp - Voice stream processing

8. 视频相关

--待续

9. 地图相关

地图上覆盖层——可实现
组件支持：

• cover-view

  &

  cover-image

• 其他部分组件在开发工具上支持，真机上不显示

事件支持：

• tap
• touch
• 不支持 touchmove，touchend
• 不会冒泡到 map组件

工具相关

1. 开发工具

1.1. 调试与非调试模式

假如工具内开启不校验域名选项
此时，调试模式下，可以不校验域名问题；http或者不合规范的请求地址将被允许，比如带有端口的地址（正常情况下url是不允许带端口的）

主要用途：

• 使用本地服务
• 使用未配置的域名
• 使用非 https 域名
• 在域名不合规范时，使用必须appid才可以使用的部分调试

1.2. 真机预览问题

• 调试模式下可用，而非调试模式下不可用的情况： 检查下是否没有配置好合法域名
• 假如配置好了域名，排查https问题

request fail

后台域名没有配置配置完毕请点击刷新按钮
• 重启开发者工具，检查配置信息是否更新

• 域名没有备案或或是备案后不足24小时；备案未生效
  

• ssl 协议有问题