mpvue跳轉(zhuǎn)頁面及注意事項(xiàng)

更新時(shí)間：2018年08月03日 11:52:52 投稿：mrr

這篇文章主要介紹了mpvue跳轉(zhuǎn)頁面及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下

下面先給大家介紹下mpvue跳轉(zhuǎn)頁面，具體內(nèi)容如下所示：

正準(zhǔn)備寫一個(gè)小程序，得知了mpvue開源的消息，又恰巧之前剛剛學(xué)習(xí)了一點(diǎn)vue，便開始了我的mpvue學(xué)習(xí)之路。

第一步就是配置環(huán)境之類的。。。附上官網(wǎng)的quickstart http://mpvue.com/mpvue/quickstart/

相信看完官網(wǎng)的教程之后，你的項(xiàng)目應(yīng)該已經(jīng)搭好了。下面說2個(gè)小問題的解決辦法吧

1.編譯總通不過，eslint限制太嚴(yán)格，關(guān)閉它吧(如果你是一個(gè)嚴(yán)謹(jǐn)?shù)娜?，那?.吧)

build文件夾--->webpack.base.conf.js---->module-rules {...loader:'eslint-loader'...} 這里面的都刪掉吧

2.寫好一個(gè)頁面，該跳轉(zhuǎn)頁面了，一臉懵逼。

就這樣，重點(diǎn)是main.js不能少，不然dist里面不會(huì)生成對(duì)應(yīng)的文件，npm run dev 重啟就可以啦

寫完一個(gè)小程序，但是還沒有做數(shù)據(jù)交互，除了跳轉(zhuǎn)頁面這塊，其他的就是vue的問題了，我在做的時(shí)候百度了好久跳轉(zhuǎn)頁面的問題，最終還是在gitHub看別人的源碼學(xué)到的了，希望可以幫到你！

下面看下mpvue 注意事項(xiàng)

1、頁面跳轉(zhuǎn)，注意是普通跳轉(zhuǎn)navigateTo還是底部導(dǎo)航跳轉(zhuǎn) switchTab

starQuestion(){
const url = '../subject/main'
// switchTab navigateTo
wx.switchTab({ url })
},

2、變量圖片文字引入組件

<img :src="item.ad_url" alt="">
<toast :message="msg" :visible.sync="visible" position="center"></toast>

3、模板注意設(shè)置props 模板名稱name

<template>
<div class="userinfo">
<img class="userinfo-avatar" :src='avatarUrl' background-size="cover" />
<div class="userinfo-nickname">
<p>{{nickName}}</p>
</div>
</div>
</template>
<script>
// 頭像信息模板
export default {
name: 'inform',
props: {
nickName:'String',
avatarUrl:'String'
}
}
</script>

4、關(guān)于formid 按鈕要把formsubmit 改為@submit 如 bindchange="eventName" 事件，需要寫成 @change="eventName"

<!-- <form report-submit="true" bindsubmit="formSubmit" class="formSubmit"> -->
<form report-submit="true" @submit="formSubmit" class="formSubmit">
<button class="starButton" formType="submit">開始出題</button>
</form>

小程序組件

mpvue 可以支持小程序的原生組件，比如： picker,map 等，需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，需要寫成 @change="eventName"

示例代碼：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
 <view class="picker">
  當(dāng)前選擇: {{date}}
 </view>
</picker>

總結(jié)

以上所述是小編給大家介紹的mpvue跳轉(zhuǎn)頁面及注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: