使用mpVue框架开发小程序

问题总结

1. tabbar的设置

在文件目录src/app.json设置页面的tabbar时，目标跳转路劲是pagePath应该是对应页面的入口文件main.js,例如："pagePath": "pages/index/main"。

2. 使用less编写样式

• 使用npm下载

npm install less less-loader --save

• 修改build文件下面的webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加:

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
},

• style中加入lang="less"属性

<style lang="less" scoped>
</style>

3. 新增页面需要npm run build

因为 webpack 编译的文件是由配置的 entry 决定的，新增的页面并没有添加进 entry，所以需要手动 npm run build一下，这个也并非高频操作。

4. 页面跳转以及参数传递

mpvue中不支持路由跳转，所以需要用小程序的API进行跳转：

// 跳转到详情页index/index.vue
    toDetail (bookItem) {
      wx.navigateTo({
        url: '/pages/detail/main?bookItem=' + JSON.stringify(bookItem)
      })
    },
// detail/index.vue获取参数
mounted () {
    this.bookItem = JSON.parse(this.$mp.query.bookItem)
  },

5. 网络请求 --- wx.request(Object object)

• 域名只支持 https
• wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个；

6. 使用自定义组件和父子组件传值（与vue相似）

• 把项目中一些公共的样式抽取出来，写在Component目录中
• 在要使用的页面中引入并使用

<BooksList :booksArr="booksArr" />

import BooksList from '../booksList/index'
export default {
  components: { BooksList }
}