如何使用mpvue构建项目

mpvue：Vue.js in mini program

mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

项目

这里模仿的是美团app的功能

主要特性

1. 彻底的组件化开发能力：提高代码

2. 完整的 Vue.js 开发体验

3. 方便的 Vuex 数据管理方案：方便构建复杂应用

4. 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload

5. 支持使用 npm 外部依赖

6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

7. H5 代码转换编译成小程序目标代码的能力

基础使用

1. 全局安装vue-cli

npm install --global vue-cli

2. 创建一个基于mpvue-quickstart模板的新项目

vue init mpvue/mpvue-quickstart 项目名称

3. 安装依赖

cd my-project
npm install

4. 启动构建

npm run dev

实现项目功能

点击位置跳转城市页面

点击跳转

      wx.navigateTo({
        url: "../city/main"
      });

实现定位功能

获取定位信息

// 需要获取定位信息的页面
    wx.getLocation({
      type: "wgs84",
      success: res => {
        console.log(res); // 获取到经纬度
      }
    });

// app.json配置permission字段
{
  "pages": [
    ...
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

将经纬度转换成地址

1. 借助腾讯地图小程序JavaScript SDK
   链接：https://lbs.qq.com/qqmap_wx_jssdk/index.html
2. 申请地图开发者秘钥(key)
3. 下载微信小程序JavaScriptSdk
   链接：http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip
4. 引入qq.map-wx-jssdk

// 引入SDK核心类
var QQMapWX = require("../../utils/qqmap-wx-jssdk.js");

注意： 这里需要解决mpvue不支持commonjs规范的问题
处理： 修改.babellrc文件，plugins添加"transform-es2015-modules-commonjs"

"plugins": ["transform-runtime","transform-es2015-modules-commonjs"]

5. 逆地址解析reverseGeocoder

        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: r => {
            this.city = r.result.address_component.city;
          }
        });

渲染城市选择页面

• 引入城市数据cityData.js

• 循环数据

<div v-for="(item,i) in myDatas" :key="i" :id="item.letter">
	<p class="a">{{item.letter}}</p>
	<ul v-for="(city,x) in item.citys" :key="x">
		<li class="list" @click="goCity(city)">
			{{city}}
		</li>
	</ul>
</div>

点击字母定位到对应的城市位置

• 通过scroll-view来实现；

  • scroll-into-view:值应为某子元素id（id不能以数字开头)

    <template>
        <div id="app">
          <scroll-view class="scroll-view" scroll-y="true" :scroll-into-view="letter">
            ...
          </scroll-view>
        </div>
    </template>
    

点击选中城市

• 通过全局变量来带参数，并返还上一层

  let app = getApp();
  export default {
    ...
    methods: {
      goCity(city){
        this.cCity = city;
        app.globalData.c = city;
  
        this.letter = "";
        
  	  // 返还上层目录
        wx.navigateBack({
          delta:1
        })
      }
    },
  };
  

• 主页显示

  onShow(){
  	if( typeof app.globalData.address !== 'undefined'){
  		this.loca =  app.globalData.address;
  	}
  },
  

实现列表及详细页面

• 自定义导航 "navigationStyle":"custom"
  这样可以自定义导航样式而不是固定的样式

云储存数据

1. 添加数据

   • 导入图片资源

   • 添加列表数据
     注意点：
     1、JSON 数据不是数组，而是类似 JSON Lines，即各个记录对象之间使用 \n 分隔，而非逗号；

     2、JSON 数据每个键值对的键名首尾不能是 .，例如 “.a”、“abc.”，且不能包含多个连续的 .，例如 “a…b”；

     3、键名不能重复，且不能有歧义，例如 {“a”: 1, “a”: 2} 或 {“a”: {“b”: 1}, “a.b”: 2}；

     4、时间格式须为 ISODate 格式，例如 “date”: { “$date” : “2018-08-31T17:30:00.882Z” }；

     5、当使用 Insert 冲突处理模式时，同一文件不能存在重复的 _id 字段，或与数据库已有记录相同的 _id 字段；

     6、CSV 格式的数据默认以第一行作为导入后的所有键名，余下的每一行则是与首行键名一一对应的键值记录。
     所以：

     • 处理json文件
     • 导入处理过后的新json文件

     const fs =require("fs");
     
     let res = fs.readFileSync('./mydata.json').toString();
     
     let reg = /\}\s*\,\s*{/g;
     
     let result = res.replace(reg,"}{");
     
     fs.writeFileSync("./wxList.json",result);
     

2. 获取云列表数据

   1. 初始化数据库

   const db = wx.cloud.database()
   

   2. 查询数据库

   db.collection("库名").get().then(res => {
   	console.log(res)
   });
   

3. 获取详细内容

4. 实现列表上拉加载更多

     onReachBottom(){}