項目結構css
|---build
|---pages.js文件目錄
|---src
|---component子組件
|---pages
|---業務頁面
|---store,vuex儲存
|---utils
|---請求api.js
|---format格式化插件,小程序中不能使用vue自帶的格式化只能手動修改後臺返回的時間戳,價格,訂單狀態等
|---request封裝fly進行請求響應攔截
|---wx.js
複製代碼
環境及依賴html
less-loader,提供嵌套樣式,誰用誰知道vue
flyio提供請求便於請求模塊的快速轉化h5(flyio提供了h5,小程序的請求封裝,參考mpvue中提供的一個例子寫攔截器,用於處理後臺返回未登陸狀態跳轉頁面),本身在小程序中wx.request封裝也同樣,只是轉h5又須要作一個axios。webpack
騰訊地圖qqMap提供的reverseGeocoder(wx.getLocation只提供了經緯度定位,而產品須要的是確認定位後獲取城市,進行同城商品檢索)ios
阿里雲oss對象儲存處理文件上傳,比較意外的是騰訊對阿里雲的oss域名前綴進行了封禁後臺不能配置,解決方案是讓後臺將該域名進行服務器域名代理。提一嘴,最開始用七牛雲沒有出現這個問題,嫌麻煩的能夠用七牛 git
富文本處理,使用mpvue例子中提供的mpvue-wxparse,固然你也能夠本身寫github
小程序開發過程遇到的問題web
轉h5實踐vuex
/*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
})
},
// 模態框顯示
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;}
複製代碼
最後感謝美團的各位大佬,讓我這個菜雞舒舒服服的開發了小程序、業績也達標了,對文章有問題的大佬請指正,但願你們都能順順利利開開心心的開發小程序,最近看到京東出了個taro又準備開啓新的填坑之路啦。編程