摘要:官網一新建一個項目新建項目切換到項目安裝依賴運行二預覽首先,打包打開微信開發者工具,在項目目錄中選擇項目的文件,可以暫時不寫,項目名稱自定義。點擊編譯看效果,點擊預覽在手機上用微信掃碼看效果。
官網: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})
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53435.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...
閱讀 1329·2021-11-15 11:37
閱讀 2213·2021-09-23 11:21
閱讀 1299·2019-08-30 15:55
閱讀 2105·2019-08-30 15:55
閱讀 2815·2019-08-30 15:52
閱讀 2818·2019-08-30 11:12
閱讀 1572·2019-08-29 18:45
閱讀 1885·2019-08-29 14:04