摘要:官网一新建一个项目新建项目切换到项目安装依赖运行二预览首先,打包打开微信开发者工具,在项目目录中选择项目的文件,可以暂时不写,项目名称自定义。点击编译看效果,点击预览在手机上用微信扫码看效果。
官网: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); } }
八、普通选择器
效果图:
data () { return { sexArray: ["女", "男"], sexVal: "选择" } }, methods: { bindPickerChange(e) { let index = Number(e.mp.detail.value) this.sexVal = this.sexArray[index] } } 当前选择:{{sexVal}}
九、单页面的配置
请参考此大佬: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/117059.html
摘要:官网一新建一个项目新建项目切换到项目安装依赖运行二预览首先,打包打开微信开发者工具,在项目目录中选择项目的文件,可以暂时不写,项目名称自定义。点击编译看效果,点击预览在手机上用微信扫码看效果。 官网:http://mpvue.com/mpvue/quicks...一、新建一个mpvue项目 $ vue init mpvue/mpvue-quickstart my-project //新...
摘要:官网一新建一个项目新建项目切换到项目安装依赖运行二预览首先,打包打开微信开发者工具,在项目目录中选择项目的文件,可以暂时不写,项目名称自定义。点击编译看效果,点击预览在手机上用微信扫码看效果。 官网:http://mpvue.com/mpvue/quicks...一、新建一个mpvue项目 $ vue init mpvue/mpvue-quickstart my-project //新...
摘要:公司的招聘要求都提到了至少熟悉其中一种前端框架,有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型,并来说说选其技术的几大优势。技术的优势互联网前端大潮后,前端出现了大框架,分别是与。 1、技术选型的背景前端技术发展日新月异,互联网上出现的新型框架也比较多,如何让新招聘的人员...
摘要:美团小程序框架入门教程自打写了美团小程序框架蹲坑指南一发不可收拾,今天趁周末空闲,来写个没朋友的简单入门教程,本教程只针对新手,老鸟勿喷。 美团小程序框架mpvue入门教程 自打写了 美团小程序框架mpvue蹲坑指南,一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷。 另外,我还专门为本文做了一个简单的项目,如果懒得从头开始搭项目的童鞋...
摘要:在这一步,实例已完成以下的配置数据观测,属性和方法的运算,事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低 简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点3.可完全组件化开发 特点 1.组件化开发2.完成的Vue.js开发体验(前提是熟悉Vue)3.可使用Vuex管理状态4.Webpack构建项目5.最终H5...
阅读 3605·2021-11-24 10:25
阅读 2510·2021-11-24 09:38
阅读 1219·2021-09-08 10:41
阅读 2905·2021-09-01 10:42
阅读 2570·2021-07-25 21:37
阅读 1982·2019-08-30 15:56
阅读 915·2019-08-30 15:55
阅读 2751·2019-08-30 15:54