微信小程序开发的基本流程

微信小程序开发的基本流程

一,微信小程序简介

1,微信小程序简称小程序，张小龙在微信公开课 Pro 上发布的小程序正式上线，时间是2017年1月9日。

2,微信小程序这个词可以分解为“微信”和“小程序”两部分

(1),其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。

(2),“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载。这就是所谓用完即走的原则。

3,微信小程序，很多类似形态的应用都采用类似的架构：

• 使用 JSON 技术来表现应用的配置信息。包含应用的基本信息，页面配置和路由，应用全体的信息等。
• 使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素，例如列表、按钮、文本框、选择框等都通过 XML 语言来描述，遵从 XML 语法，对于页面的共同风格，使用 CSS 进行定义。
• 使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理，系统 API 的调用等。
• 架构在视图层和逻辑层之间提供数据和事件传输功能，从而尽量减少难度。由于类似应有都属于轻应用，所以提供的功能都比较单一。

4,JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于 ECMAScript（W3C 制定的 JavaScript 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

5,XML（Extensible Markup Language），中文名为可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。

在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息，比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术，也是当今处理分布式结构信息的有效工具。早在1998年，W3C 就发布了 XML1.0 规范，使用它来简化 Internet 的文档信息传输。

6,CSS层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

7,JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

二,注册微信小程序

在创建自己的微信小程序之前,首先需要注册小程序账号,有如下账号类型：

具体的注册流程,可以参考官方的简易教程

三,安装工具,创建项目

第一步：下载微信小程序开发者工具并安装，下载路径：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

进到下载界面后，根据自己的操作系统选择相应的链接进行下载，下载完成后进行安装。

第二步：安装登录工具

开发者工具安装完成后我们就可以将其打开，初次打开会需要用微信扫码登录，如下图，用手机微信扫一扫后确认登录就可以了。

第三步：选择一个项目类型

登录成功后，如果是第一次使用该工具会弹出选择项目类型的窗口，如下图：

第四步：创建一个项目

选择项目类型成功后，会弹出创建项目的窗口，如下图：

​ 在创建过程中，如果选择的本地文件夹是个空文件夹会出来一个勾选项“建立云开发快速启动模版”，为方便初学者了解微信小程序的基本代码结构，请勾选此项，勾选后，开发者工具会帮助我们在开发目录里生成一个简单的 demo，如下图：

四,项目代码结构说明与开发

4.1,项目代码结构

点击开发者工具上侧导航的“编辑器”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

​ 1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

2、​ app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

　　我们注意到，在实例程序的代码中还有2个文件夹，一个是pages,一个是style,其中style是放通用样式的一个文件夹，pages是存放所有页面的文件夹。我们着重讲一下这个pages.

4.2,小程序页面文件构成

　在这个示例中，我们有七个页面，index 页面，即欢迎页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

​ index.wxml 是页面的结构文件：

 <!--index.wxml-->
 <view class="container">

   <!-- 用户 openid -->
   <view class="userinfo">
     <button
       open-type="getUserInfo"
       bindgetuserinfo="onGetUserInfo"
       class="userinfo-avatar"
       style="background-image: url({{avatarUrl}})"
     ></button>
     <view>
       <text>jackson影琪</text>
 </view>
 </view> 

 <view class="text-title">
       <text>Hello world</text>
 </view>
 </view>

​ 本例中使用了<view/>、<button/>、<text/>来搭建页面结构，绑定数据和交互处理函数。

​ index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

 //index.js
 const app = getApp()

 Page({
   data: {
     avatarUrl: './user-unlogin.png',
     userInfo: {},
     logged: false,
     takeSession: false,
     requestResult: ''
   },

   onLoad: function() {
     if (!wx.cloud) {
       wx.redirectTo({
         url: '../chooseLib/chooseLib',
       })
       return
     }

     // 获取用户信息
     wx.getSetting({
       success: res => {
         if (res.authSetting['scope.userInfo']) {
           // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
           wx.getUserInfo({
             success: res => {
               this.setData({
                 avatarUrl: res.userInfo.avatarUrl,
                 userInfo: res.userInfo
               })
             }
           })
         }
       }
     })
   },

   onGetUserInfo: function(e) {
     if (!this.logged && e.detail.userInfo) {
       this.setData({
         logged: true,
         avatarUrl: e.detail.userInfo.avatarUrl,
         userInfo: e.detail.userInfo
       })
     }
   },

   onGetOpenid: function() {
     // 调用云函数
     wx.cloud.callFunction({
       name: 'login',
       data: {},
       success: res => {
         console.log('[云函数] [login] user openid: ', res.result.openid)
         app.globalData.openid = res.result.openid
         wx.navigateTo({
           url: '../userConsole/userConsole',
         })
       },
       fail: err => {
         console.error('[云函数] [login] 调用失败', err)
         wx.navigateTo({
           url: '../deployFunctions/deployFunctions',
         })
       }
     })
   },

   // 上传图片
   doUpload: function () {
     // 选择图片
     wx.chooseImage({
       count: 1,
       sizeType: ['compressed'],
       sourceType: ['album', 'camera'],
       success: function (res) {

         wx.showLoading({
           title: '上传中',
         })

         const filePath = res.tempFilePaths[0]

         // 上传图片
         const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
         wx.cloud.uploadFile({
           cloudPath,
           filePath,
           success: res => {
             console.log('[上传文件] 成功：', res)

             app.globalData.fileID = res.fileID
             app.globalData.cloudPath = cloudPath
             app.globalData.imagePath = filePath

             wx.navigateTo({
               url: '../storageConsole/storageConsole'
             })
           },
           fail: e => {
             console.error('[上传文件] 失败：', e)
             wx.showToast({
               icon: 'none',
               title: '上传失败',
             })
           },
           complete: () => {
             wx.hideLoading()
           }
         })

       },
       fail: e => {
         console.error(e)
       }
     })
   },

 })

index.wxss 是页面的样式表：

 /**index.wxss**/

 page {
   background: #f6f6f6;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 .userinfo, .uploader, .tunnel {
   margin-top: 40rpx;
   height: 140rpx;
   width: 100%;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-left: none;
   border-right: none;
   display: flex;
   flex-direction: row;
   align-items: center;
   transition: all 300ms ease;
 }

 .userinfo-avatar {
   width: 100rpx;
   height: 100rpx;
   margin: 20rpx;
   border-radius: 50%;
   background-size: cover;
   background-color: white;
 }

 .userinfo-avatar:after {
   border: none;
 }

 .userinfo-nickname {
   font-size: 32rpx;
   color: #007aff;
   background-color: white;
   background-size: cover;
 }

 .userinfo-nickname::after {
   border: none;
 }

 .uploader, .tunnel {
   height: auto;
   padding: 0 0 0 40rpx;
   flex-direction: column;
   align-items: flex-start;
   box-sizing: border-box;
 }

 .uploader-text, .tunnel-text {
   width: 100%;
   line-height: 52px;
   font-size: 34rpx;
   color: #007aff;
 }

 .uploader-container {
   width: 100%;
   height: 400rpx;
   padding: 20rpx 20rpx 20rpx 0;
   display: flex;
   align-content: center;
   justify-content: center;
   box-sizing: border-box;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }

 .uploader-image {
   width: 100%;
   height: 360rpx;
 }

 .tunnel {
   padding: 0 0 0 40rpx;
 }

 .tunnel-text {
   position: relative;
   color: #222;
   display: flex;
   flex-direction: row;
   align-content: center;
   justify-content: space-between;
   box-sizing: border-box;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }

 .tunnel-text:first-child {
   border-top: none;
 }

 .tunnel-switch {
   position: absolute;
   right: 20rpx;
   top: -2rpx;
 }

 .disable {
   color: #888;
 }

 .service {
   position: fixed;
   right: 40rpx;
   bottom: 40rpx;
   width: 140rpx;
   height: 140rpx;
   border-radius: 50%;
   background: linear-gradient(#007aff, #0063ce);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   display: flex;
   align-content: center;
   justify-content: center;
   transition: all 300ms ease;
 }

 .service-button {
   position: absolute;
   top: 40rpx;
 }

 .service:active {
   box-shadow: none;
 }

 .request-text {
   padding: 20rpx 0;
   font-size: 24rpx;
   line-height: 36rpx;
   word-break: break-all;
 }
 .text-title{
 margin-top: 50%;
 }
 .text-title text{
   font-size: 96rpx;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

​ index.json 是页面的配置文件：

​ 页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

 {
   "pages": [
     "pages/index/index",
     "pages/userConsole/userConsole",
     "pages/storageConsole/storageConsole",
     "pages/databaseGuide/databaseGuide",
     "pages/addFunction/addFunction",
     "pages/deployFunctions/deployFunctions",
     "pages/chooseLib/chooseLib"
   ],
   "window": {
     "backgroundColor": "#F6F6F6",
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#F6F6F6",
     "navigationBarTitleText": "jackson影琪",
     "navigationBarTextStyle": "black"
   }
 }

运行结果如下：

手机预览

​ 开发者工具上侧菜单栏，点击"预览"，扫码后即可在微信客户端中体验。