Aaron-微信小程序开发日记三：开发篇

写在前面

上一篇我们已经基于mpvue创建了第一个微信小程序，接下来就详细介绍下mpvue开发项目结构和目录。

一、目录结构

在Visual Studio Code里面打开项目文件夹，我们可以看到类似如下的文件结构：

image

这里根据开发习惯进行vue项目重新整理，在整理后的规范化标准目录是这样的：

image

其中project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。

二、程序入口

微信原生开发入口有三个重要文件

• app.json
• app.js
• index

1、app.json

app.json是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。

在mpvue项目文件中对应的文件就是src/main.js，我们可以在这里进行配置。

image

2、app.js

app.js中包含了小程序的各种原生生命周期方法，如onLaunch、onShow等等。而在mpvue中，它使用了一个简单的Vue组件App.vue来实现等价的功能。我们在这个App.vue组件中可以编写小程序的生命周期方法（通常使用Vue的生命周期方法，但也兼容原生的生命周期方法），也可以在其中加入小程序的全局样式（等价于原生方式下的app.wxss

image

接着，这个App.vue组件被src/main.js引入并被设置了一个mpType的属性值，其值为app。这个值是为了与后面要讲的小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值。引入这个App.vue组件后，会用它作为参数来创建一个Vue的实例，并调用$mount()方法加载。下面是这个过程的关键代码行

image

3、首页及其他页面

每个小程序都至少需要一个页面，而每个页面都需要占用一个目录，包含两个必须文件，一个用于实现主体的.vue文件和一个将这个页面生成Vue实例并加载的main.js文件。后面的所有mpvue页面都需要包含这两个文件。另外一个main.json属于配置文件，配置页面相关熟悉及引入ui组件。

image

image

image

4、自动编译

image

可以看到，这个组件完全看不到小程序写法的影子，而是全部由Vue开发Web应用的写法来完成：数据绑定、事件处理、scoped局部样式、以及使用HTML标签来构建界面。这样最大化的保持和网页应用开发一致，减少了前端人员切换到小程序的学习理解成本，也为原先使用Vue开发的网页应用移植到小程序平台提供了降低迁移成本的可能。

mpvue中推荐使用Vue组件生命周期方法，而像onPullDownRefresh、onReachBottom这类特殊功能的生命周期则需直接使用原生的。

微信小程序开发apihttps://developers.weixin.qq.com/miniprogram/dev/api/

5、导航栏配置

小程序中拥有顶部及底部导航栏，可以自定义使用，也可以使用原生导航栏。在根目录配置文件app.json中进行配置。

image

三、使用微信原生api

开发微信小程序对应的就离不开使用微定义的api进行开发，这里使用获取用户授权及用户信息为例。

image

wx.getSetting({
  success(res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

首先判断用户是否授权，使用wx.getSetting，而在mpvue中我们需要这么处理。在vue中methods内定义一个函数getSetting，其中调用微信的api，然后在生命周期mounted中进行调用。这样当用户访问就会执行微信api判断是否已经授权。

image

wx.authorize会调用弹窗进行授权，如果授权就不会弹窗并且执行wx.getUserInfo请求用户信息。如果没有授权就会调用wx.authorize跳出授权页面。

根据最新api显示，getUserInfo将不会弹窗授权窗口，需要开发人员进行引导设置。官方建立使用button点击授权。

            授权登录
        

如果没有授权，需要引导用户进行点击授权，将会调用bindGetUserInfo事件

image

授权成功后可以调用wx.login获取到code 用户登录凭证（有效期五分钟）

image

后端可以同过这个凭证请求到用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

image

这样就可以引导用户去授权，获取到用户信息

image

image

image

这样就完成了对微信api的应用，更多api请看微信开发者中心。