項目結構
|---build |---pages.js文件目錄 |---src |---component子組件 |---pages |---業(yè)務頁面 |---store,vuex儲存 |---utils |---請求api.js |---format格式化插件,小程序中不能使用vue自帶的格式化只能手動修改后臺返回的時間戳,價格,訂單狀態(tài)等 |---request封裝fly進行請求響應攔截 |---wx.js
環(huán)境及依賴
less-loader,提供嵌套樣式,誰用誰知道
flyio提供請求便于請求模塊的快速轉化h5(flyio提供了h5,小程序的請求封裝,參考mpvue中提供的一個例子寫攔截器,用于處理后臺返回未登錄狀態(tài)跳轉頁面),自己在小程序中wx.request封裝也一樣,只是轉h5又需要做一個axios。
騰訊地圖qqMap提供的reverseGeocoder(wx.getLocation只提供了經緯度定位,而產品需要的是確認定位后獲取城市,進行同城商品檢索)
阿里云oss對象儲存處理文件上傳,比較意外的是騰訊對阿里云的oss域名前綴進行了封禁后臺不能配置,解決方案是讓后臺將該域名進行服務器域名代理。提一嘴,最開始用七牛云沒有出現(xiàn)這個問題,嫌麻煩的可以用七牛
富文本處理,使用mpvue例子中提供的mpvue-wxparse,當然你也可以自己寫
小程序開發(fā)過程遇到的問題
轉h5實踐
/*webpack.base.conf*/ resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'wx': resolve('src/utils/wxSimulate.js') } }, /*模擬wx的自己寫的wxsimilate.js*/ import router from '../router' import Vue from 'vue' import { ConfirmPlugin, ToastPlugin } from 'vux' Vue.use(ConfirmPlugin) Vue.use(ToastPlugin) const wx = { navigateTo ({ url }) { console.log(url) router.push({ path: url }) }, redirectTo ({url}) { router.replace({ path: url }) }, navigateBack () { router.go(-1) }, showToast ({title}) { Vue.$vux.toast.show({ // 組件除show外的屬性 text: title }) }, // 模態(tài)框顯示 showModal ({title, content, success}) { Vue.$vux.confirm.show({ title, content, // 組件除show外的屬性 onConfirm () { success && success({confirm: true, cancel: false}) }, onCancel () { success && success({confirm: false, cancel: true}) } }) } } window.wx = wx export default wx
/*mpvue*/ <style scoped lang="less"> #index {padding:100rpx 20rpx 110rpx;} /*vue*/ <style scoped lang="less"> @charset "utf-8"; @rpx: 117.188rem; #index {padding:100/@rpx 20/@rpx 110/@rpx;}
最后感謝美團的各位大佬,讓我這個菜雞舒舒服服的開發(fā)了小程序、業(yè)績也達標了,對文章有問題的大佬請指正,希望大家都能順順利利開開心心的開發(fā)小程序,最近看到京東出了個taro又準備開啟新的填坑之路啦。