摘要：官网一新建一个项目新建项目切换到项目安装依赖运行二预览首先，打包打开微信开发者工具，在项目目录中选择项目的文件，可以暂时不写，项目名称自定义。点击编译看效果，点击预览在手机上用微信扫码看效果。
官网：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})
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53435.html
