- 我们使用vuex来管理状态，每个页面都有自己的vuex, 其中index.js存放对应页面相关逻辑，为了避免频繁切换目录，把state, mutations, actions放在一个文件下，使用时并启用vuex的模块化，如下
const IndexPage = { namespaced: true, // 启用模块化vuex state: { ... // 需要共享的状态 }, mutations: { ... // 一些方法 }， actions: { ... // 请求相关 } } export default IndexPage //最后导出IndexPage
- 各个页面的vuex统一放在store里
import Vue from 'vue' import Vuex from 'vuex' import IndexPage from '../pages/index/vuex' import AddressSearch from '../pages/address/vuex/index' import CityListPage from '../pages/city-list/vuex/index' Vue.use(Vuex) const store = new Vuex.Store({ state: { ... // 全局共用的状态 }, mutations: { }, actions: { }, modules: { IndexPage, // 首页vuex AddressSearch, // 地址检索页vuex CityListPage, // 城市列表页vuex }, }) export default store
- 最后，在main.js里面引用
import Vue from 'vue' import App from './App' import store from './store' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App, store }) app.$mount()
完整的首页逻辑交互框架就搭建成功了，以下是开发首页时遇见的问题
首页开发遇到的问题
- 使用swiper轮播组件，写好子组件，父组件因为无效果
问题原因：引入的import swiper from "../../components/swiper/swiper" ,导致把自定义的swiper覆盖，所以不展示
解决：引入的import uniSwiper from "../../components/swiper/swiper" ,不和原组件命名冲突即可
- 转百度小程序header报错
问题原因：百度设置http请求header如果有中文字符
解决：使用条件编译，如果是百度小程序需要encodeURI 一下， 或者删除header的中文部分
- uni-app的image标签，在小程序端不支持动态引入图片
// 引不到 <image class="tip_icon" src="/static/sender{{endPoint.address ? '' : '_default'}}.png"/>
// 可以引入 <image class="tip_icon" src="/static/sender.png"/>
- uni.getLocation() 只能获取经纬度，获取不到详细地址信息
- 非 h5 平台 :key 不支持表达式
由于:key="timer__${idx}"的写法，编译时控制台会警告，但是不影响页面
<view class="column_item" v-for="(item, idx) in item" :key="`timer__${idx}`" // 改成:key="idx" 即可 > {{item == "立即用车" ? "" : index == 1 ? "时" : index == 2 ? "分" : ""}} </view>
- 父子组件传参，类型定义不对不提示错误信息，只展示null, 所以遇到null问题可以查看是否是类型定义不一致
- uni-app中的watch不支持监听小程序，如下
watch: { searchType (to) { if (to) { // 如果是起始地回填起始地信息否则回填目的地信息 if (to === SEARCH_TYPE.START) { this.detailAddress = this.startAddress.detailAddress || '' } else { this.detailAddress = this.endAddress.detailAddress || '' } } } }
改成
mounted () { if (this.searchType === SEARCH_TYPE.START) { this.detailAddress = this.startAddress.detailAddress || '' } else { this.detailAddress = this.endAddress.detailAddress || '' } }
个人中心开发
- 页面效果
个人中心主要涉及的H5页面以及小程序的授权登录功能。所以主要部分就是webview的实现。
- webview的实现
// template <web-view id='web-view' v-if='src' :src='src' @bindmessage='onmessage'></web-view>
onLoad (options) { console.log('H5入口页获取到的参数', options) let { src, needLogin} = options if(!needLogin){ this.src = decodeURIComponent(src) return } // 需要登录的 就先获取临时token this.fetchTempToken(src) }
如果不需要登录的H5我们直接赋值到src即可，需要登录才能正常访问的页面，首先要获取临时token,拿到临时token后回传给服务端并且采用中间页redirectUrl的形式跳转。
