摘要：官網(wǎng)一新建一個(gè)項(xiàng)目新建項(xiàng)目切換到項(xiàng)目安裝依賴運(yùn)行二預(yù)覽首先，打包打開微信開發(fā)者工具，在項(xiàng)目目錄中選擇項(xiàng)目的文件，可以暫時(shí)不寫，項(xiàng)目名稱自定義。點(diǎn)擊編譯看效果，點(diǎn)擊預(yù)覽在手機(jī)上用微信掃碼看效果。
官網(wǎng)：http://mpvue.com/mpvue/quicks...
一、新建一個(gè)mpvue項(xiàng)目
$ vue init mpvue/mpvue-quickstart my-project //新建項(xiàng)目
$ cd my-project //切換到項(xiàng)目
$ npm install //安裝依賴
$ npm run dev //運(yùn)行
二、預(yù)覽
1、首先，打包
$ npm run build
2、打開“微信開發(fā)者工具”，在‘項(xiàng)目目錄’中選擇項(xiàng)目的dist文件，APPID可以暫時(shí)不寫，‘項(xiàng)目名稱’自定義。
3、點(diǎn)擊‘編譯’看效果，點(diǎn)擊‘預(yù)覽’在手機(jī)上用微信掃碼看效果。
三、頁面跳轉(zhuǎn)
立即報(bào)名
在最外層app.json中加入路徑且重新運(yùn)行該項(xiàng)目，如下圖：
四、分享
如果需要自定義分享，則重寫以下方法（注意，此方法不應(yīng)放在methods中，應(yīng)該與methods同級(jí)）
onShareAppMessage: function (res) {
// 分享程序
var title = ""
var path = "pages/index/main"
var imageUrl = ""
return {
title,
path,
imageUrl,
success: (res) => {
console.log("res", res)
},
fail: (res) => {
console.log("res", res)
}
}
}
五、圖片預(yù)覽
previewImg () {
// 預(yù)覽圖片
wx.previewImage({
// current: "/static/images/second_3.jpg", // 當(dāng)前顯示圖片的http鏈接，只有一張時(shí)，可以不寫
urls: ["http://bak-img.oss-cn-shenzhen.aliyuncs.com/20181204111744.jpg"], // 需要預(yù)覽的圖片http鏈接列表
success (res) {
console.log(res)
},
fail () {
wx.showToast({
title: "預(yù)覽失??！",
icon: "none",
duration: 1000
})
}
})
}
六、請(qǐng)求接口
wx.request({
url: myUrl,
data: {
type: "k"
},
success: function (res) {
console.log(res.data)
}
})
七、圖片上傳到阿里云（OSS）
請(qǐng)參考這位大佬的博客：https://blog.csdn.net/qq_2337...
點(diǎn)擊調(diào)皮效果（加入addscale即可）：
.addscale {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: addscale;
animation: addscale 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
}
@-webkit-keyframes addscale {
from,
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform: scale(1.05, 0.95);
transform: scale(1.05, 0.95);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform: scale(1.05, 0.95);
transform: scale(1.05, 0.95);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
@keyframes addscale {
from,
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform: scale(1.05, 0.95);
transform: scale(1.05, 0.95);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform: scale(1.05, 0.95);
transform: scale(1.05, 0.95);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
八、普通選擇器
效果圖：
當(dāng)前選擇：{{sexVal}}
data () {
return {
sexArray: ["女", "男"],
sexVal: "選擇"
}
},
methods: {
bindPickerChange(e) {
let index = Number(e.mp.detail.value)
this.sexVal = this.sexArray[index]
}
}
九、單頁面的配置
請(qǐng)參考此大佬：https://blog.csdn.net/qq_3543...
十、頁面跳轉(zhuǎn)
1、行內(nèi)跳轉(zhuǎn)
a、navigator、vue-router都可以
2、js跳轉(zhuǎn)（標(biāo)簽為）
*普通跳轉(zhuǎn) navigateTo
const url = "../result/main"
wx.navigateTo({url})
*底部導(dǎo)航跳轉(zhuǎn) switchTab
const url = "../result/main"
wx.switchTab({url})
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99923.html
