Vue.prototype.$store = store
子组件可通过 this.$store
使用使用 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>
小程序原生事件 ---> vue.js 规范
bindregionchange
事件直接在 dom
上将 bind
改为@ @regionchange
,在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
关于修饰符
<script type="text/x-template">
字符串模版等都不支持this.$root.$mp.query
this.$root.$mp.appOptions
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'
}
}
})
input, map, canvas, video, live-player,camera , textarea
是由客户端创建的原生组件,层级最高,z-index 没用
而其它组件都是基于Web Component规范实现的Custom Element,而诸如picker弹出选择器行为,navigator跳转行为,都是基于微信原生提供的能力,理解为调用wx.xxxApi
微信小程序的组件是否都是原生实现的,类似React Native? No,小程序视图层仍然依赖于Webview,只有部分组件是原生组件,用来解决Mobile Web体验问题。目前原生组件包括: input,textarea,video,map,canvas
小程序页面跳转打开最多五层,超出五层不会跳转了
mpvue 组件名大写会提示,统一小写,警告信息如下:
微信小程序不支持本地引用背景图片(image 标签支持本地图片)、音频、视频,所以需要外链。对于图片还可以使用 Base64 编码,直接在 html 或 css 中引用
<img src="../../images/logo.png">
import
进来,或把图片放在 static 目录下background-image
背景图在真机无法显示 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' }, ... })小程序的机制,是在退出五分钟内进入,就会显示的是退出前的页面,如果你希望进入小程序都相当于冷启动的方式,直接进入主页面。你可以在page的onUnload里面里面set一个值,然后在app的onShow的时候判断这个值,然后决定是否跳到首页~
录音暂停事件
监听情况:
不能监听:
见博文-目前未更新: mp - Voice stream processing
--待续
地图上覆盖层——可实现 组件支持:
cover-view
& cover-image
事件支持:
假如工具内开启不校验域名选项 此时,调试模式下,可以不校验域名问题;http或者不合规范的请求地址将被允许,比如带有端口的地址(正常情况下url是不允许带端口的)
主要用途:
request fail
问题排查 其他可参考:https 解决方案
字体/第三方UI库引用不支持
@font-face {
font-family: '字体名称';
src: url("../../resources/font/UKIJTuzTom.eot");
font-weight: normal;
font-style: normal;
}
微信小程序 @font-face 里 添加url地址没用, 所以 URL地址替换掉 base64 编吗实现
http://transfonter.org/
网站里 上传字体,选择base64 编吗 ,fotmat后下载基于canvas 绘制,体积小巧
由于微信小程序本身框架的限制,很难集成目前已有的图表工具,显示图表目前有两种方案:
wxcharts 采用第二种方案 如何使用
dist/wxcharts.js
或者 dist/wxcharts-min.js
git clone https://github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js