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