命名格式
組件名不要和微信的組件名重名
(網(wǎng)上整理來(lái)的各個(gè)小點(diǎn)，方便自己查看)
微信自帶組件
- view
- scroll-view
- swiper
- movable-view
- cover-view
- icon
- text
- rich-text
- progress
- button
- checkbox
- form
- input
- label
- picker
- picker-view
- radio
- slider
- switch
- textarea
- navigator
- audio
- image
- video
- camera
- live-player
- live-pusher
- map
- open-data
- web-view
- ad
mpvue不支持的組件名
以下為保留關(guān)鍵字刽宪，暫不支持作為組件名：
- a
- canvas
- cell
- content
- countdown
- datepicker
- div
- element
- embed
- header
- image
- img
- indicator
- input
- link
- list
- loading-indicator
- loading
- marquee
- meta
- refresh
- richtext
- script
- scrollable
- scroller
- select
- slider-neighbor
- slider
- slot
- span
- spinner
- style
- svg
- switch
- tabbar
- tabheader
- template
- text
- textarea
- timepicker
- trisition-group
- trisition
- video
- view
- web
mpvue部分
img標(biāo)簽
mpvue中模板中的img標(biāo)簽url指向相對(duì)路徑時(shí)不能正確解析
img標(biāo)簽用絕對(duì)路徑引入
css中可以通過(guò)相對(duì)路徑引入圖片
mpvue寫(xiě)法注意
import { LTabbar, LTabbarItem } from '@/components/tabbar' （不行）
只支持單文件引用
import LTabbar from '@/components/tabbar'
import LTabbarItem from '@/components/tabbar-item'v-for
v-for里邊必須加:key所有頁(yè)面里面的created生命周期函數(shù) 都會(huì)在小程序加載的時(shí)候空郊，
一次性執(zhí)行梭纹，而不是每進(jìn)入一個(gè)頁(yè)面執(zhí)行一次
解決方法，用小程序的 onload()/ vue 的 mounted()
- 組件第一次加載的時(shí)候不能執(zhí)行onShow里面的內(nèi)容，只有在隱藏又顯示后邮旷，才會(huì)顯示孤里，而頁(yè)面卻每次進(jìn)入都會(huì)顯示
例如我們?cè)谝粋€(gè)組件里有一下代碼
onLoad () {
console.log('onLoad')
},
onShow () {
console.log('onShow')
},
mounted () {
console.log('mounted')
},
然后實(shí)際上伏伯，只打印出
onLoad
mounted
全局變量
遇到很多需要全局變量，特別是狀態(tài)的捌袜，最好統(tǒng)一管理说搅。vue 的 vuex 是專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。使用過(guò)程遇到的坑是無(wú)法使用它的輔助函數(shù) mapState虏等、mapGetters弄唧、mapActions、mapMutations 等博其√撞牛看下 mpvue 的 issue 感覺(jué)是 mpvue 的問(wèn)題。 解決方案： 用最原始的 store.commit()慕淡、store.getter
+1. 對(duì)于一在小程序組件中為 Handler或者為EventHandle 的屬性背伴，在 mpvue 框架中要寫(xiě)成 vue 的事件綁定形式,就像:bindchange寫(xiě)成@change對(duì)于一些在小程序中綁定值的屬性，組件中的 value峰髓，在 mpvue 框架中要寫(xiě)成 :value="date"
觸發(fā)事件取值問(wèn)題
小程序：event.detail = {value: value}
在 mpvue中要這樣寫(xiě)：event.mp.detail = {value: value}對(duì)于一些回調(diào)函數(shù)傻寂，比如getuserinfo,在原生小程序中，獲取信息為：e.detail,但在mpvue中携兵，獲取方式為：e.mp.detail疾掰。
bindgetuserinfo 要寫(xiě)成 @getuserinfo，bindcontact 要寫(xiě)成 @contact徐紧，bindgetphonenumber 要寫(xiě)成 @getphonenumber静檬，binderrror 要寫(xiě)成 @errror。
文件夾首字母不能大寫(xiě)
兩層v-for不能用index的名字來(lái)作為索引并级，index改個(gè)名字就好
mpvue不支持
不支持Vue-router
不支持 純-HTML
小程序里所有的 BOM／DOM 都不能用拂檩，也就是說(shuō) v-html 指令不能用。不支持部分復(fù)雜的 JavaScript 渲染表達(dá)式
我們會(huì)把 template 中的 {{}} 雙花括號(hào)的部分嘲碧，直接編碼到 wxml 文件中稻励，由于微信小程序的能力限制(數(shù)據(jù)綁定)，所以無(wú)法支持復(fù)雜的 JavaScript 表達(dá)式愈涩。目前可以使用的有 + - * % ?: ! == === > < [] .望抽，不支持過(guò)濾器
渲染部分會(huì)轉(zhuǎn)成 wxml 加矛，wxml 不支持過(guò)濾器，所以這部分功能不支持煤篙。不支持函數(shù)
不支持在 template 內(nèi)使用 methods 中的函數(shù)斟览。動(dòng)態(tài)組件，自定義 render舰蟆，和<script type=“text/x-template”> 字符串模版等都不支持
暫不支持在組件引用時(shí)趣惠，在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class style 等樣式屬性(例：<card class=“class-name”> </card> 樣式是不會(huì)生效的)身害，因?yàn)榫幾g到wxml味悄，小程序不會(huì)生成節(jié)點(diǎn)，建議寫(xiě)在內(nèi)部頂級(jí)元素上塌鸯。
Slot（scoped 暫時(shí)還沒(méi)做支持）
動(dòng)態(tài)組件
異步組件
inline-template
X-Templates
keep-alive
transition
class
style
http://mpvue.com/mpvue/#_6 建議把官方給的這個(gè)文檔可以看下
小程序部分
- 在 input 和 textarea 中 change 事件會(huì)被轉(zhuǎn)為 blur 事件
<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
小程序能力所致侍瑟，bind 和 catch 事件同時(shí)綁定時(shí)候，只會(huì)觸發(fā) bind ,catch 不會(huì)被觸發(fā)丙猬，要避免踩坑
如何獲取小程序在 page onLoad 時(shí)候傳遞的 options
在所有 頁(yè)面 的組件內(nèi)可以通過(guò) this.mp.query 進(jìn)行獲取涨颜。
如何獲取小程序在 app onLaunch/onShow 時(shí)候傳遞的 options
在所有的組件內(nèi)可以通過(guò) this.全局的下拉加載需要在配置中設(shè)置開(kāi)啟
并且需要在方法中調(diào)用wx.stopPullDownRefresh()方法結(jié)束下拉動(dòng)作茧球，不然在真機(jī)上面下拉效果無(wú)法收起如果使用scroll-view標(biāo)簽實(shí)現(xiàn)庭瑰，有幾個(gè)地方需要說(shuō)明一下：
觸發(fā)方法需要放到methods中，并且綁定在scroll-view標(biāo)簽上調(diào)用
在scroll-view中下拉的時(shí)候抢埋，無(wú)法觸發(fā)全局的下拉效果弹灭，需要自己實(shí)現(xiàn)相應(yīng)的動(dòng)畫(huà)（所以建議優(yōu)先使用全局的方法）
下拉刷新只有在滑動(dòng)至頂部的時(shí)候才會(huì)觸發(fā)，如果你的滾動(dòng)條已經(jīng)在標(biāo)簽區(qū)域最頂部了揪垄，就無(wú)法觸發(fā)下拉方法（這點(diǎn)是最后放棄scroll-view的主要原因穷吮，處理起來(lái)太麻煩了）
