微信小程序-开发实战

前言

最近两个月在研究微信小程序（以下简称小程序）开发，开发方式历经原生小程序开发—>wepy框架开发—>mpvue框架开发。wepy和mpvue的结构类似vue，通过“编译”将代码转换成小程序原生语言，使得开发者以前端开发的模式来开发小程序。

推荐

开发方式：先体验原生开发，学习主要参考的资料是微信官网文档
，了解原生开发的模式和相关组件的属性以及可用API，再使用框架开发。使用组件化开发。
开发工具：原生开发使用微信开发者工具就可以了，使用框架开发的话推荐VSCode，安装各类的插件后还是十分好用的，框架开发时用微信开发者工具来远程调试。

实战

小程序截图：

296a47d4d0be4c9e

下面就以小程序《香港助手》—项目地址，为例讲一下整个开发到上线全过程，讲解之前简单说下原生小程序的几种文件类型：
1..json：小程序的配置文件，有app.json(全局配置)、page.json(页面配置)。
2..wxml：描述页面结构，就像H5开发中的html。
3..wxss：描述页面样式，就像H5开发中的css。
4..js：通过js脚本控制页面的交互逻辑。
《香港助手》是用mpvue框架开发——可以先看看[官方文档](https://github.com/Meituan-Dianping/mpvue)

一、在微信公众平台注册账号

以个人/企业的方式注册，填写完信息后拿到应用的APPID，APPID作为小程序的标识。之后应用的相关管理都在这里，包括添加完善小程序信息，添加开发者，添加域名白名单（必须为https），提交审核和发布小程序等。

image

二、安装npm和node环境，初始化mpvue框架，终端运行npm install后运行npm start,用微信开发者工具打开dist目录可以看到初始化的demo页面，可以修改相关配置以适应自己的开发，项目结构如下：

image
没错，这完全就是vue的结构，接下来就可以以前端开发的模式进行小程序开发了。
简单介绍一下项目结构，package.json主要是项目的配置以及相关的依赖库，static为项目的静态资源文件，src下面为我们主要的页面和逻辑代码，App.vue和main.js定义了小程序全局属性，component目录下为组件代码，page目录下为各个页面和逻辑，每个page也包含.vue文件（一个）和.js文件，js文件定义了页面的属性，也可编写逻辑方法。vue文件中主要负责页面的展示逻辑，以下是vue文件的结构：

//TEMPLATE定义页面结构
<template>
  <div class="counter-warp">
    <p>Vuex counter：{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
    <a href="/pages/index/main" class="home">去往首页</a>
  </div>
</template>

//页面逻辑，包含page的生命周期的钩子函数
<script>
// Use Vuex
import store from './store';

export default {
  computed: {
    count() {
      return store.state.count;
    },
  },
  methods: {
    increment() {
      store.commit('increment');
    },
    decrement() {
      store.commit('decrement');
    },
  },
};

</script>

//STYLE定义页面样式
<style>
.counter-warp {
  text-align: center;
  margin-top: 100px;
}
.home {
  display: inline-block;
  margin: 100px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>

三、编写代码

开发规范遵照mpvue的开发规范，有一些值得注意的地方，在使用相关组件的时候需要结合微信官方文档进行参考，比如有的控件是否提供对应的方式以供使用，使用状态机思维实现页面的更新，
注意点：1.微信有可能对某些接口进行改动，例如：

image

比较推荐的解决方案：一、未授权时，小程序进入到一个过渡页面，点击按进入，此时调起授权按钮进入。二、未授权时，当用户点击具体功能场景按钮，此时按钮绑定授权，若用户拒接，利用弹窗友好引导用户去设置页面开启授权功能。
如果只是展示用户头像昵称，可以使用 <open-data /> 组件

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

2.项目设置：

image

在未在开发平台将对应域名添加时可开启不校验域名模式进行调试。
3.小程序大小限制：每个包不能超过2M，可以分包模式，但总大小不能超过4M，所以引入图片等资源时一定要记得压缩！

四、发布上线

开发完成后可以进行预览，同时也可以将版本上传到管理平台，开发版本可以作为体验版进行体验，没问题之后可以直接提交审核，审核通过后点击将审核版本发布就可以让所有微信用户使用你的小程序了。在设置里可以生成小程序对应的二维码。

image
image

香港助手：

image