小程序初级开发实践

以一个天气小程序展现一下小程序开发的总体流程，使用原生开发，未使用比较流行的（如wepy、mpvue）框架。

前期准备

阅读小程序官方文档，熟悉开发者工具。

几个tips：

1. 开发过程当中，在项目设置里开启es6转es5，关闭域名合法、https等的校验。
2. 开发结束后，应将项目中使用的网络请求地址的域名，录入到小程序的后台的request合法域名列表中。

开发阶段

项目结构

• componnets - 组件文件夹
• images - 图片文件夹
• pages - 页面文件夹
• utils - 工具方法
• app.js - 全局注册小程序实例，绑定生命周期回调函数等
• app.json - 小程序全局配置，如页面路径，底部tab栏配置，窗口表现，使用到的插件等
• app.wxss - 全局样式文件，全部页面通用。
• project.config.json - 开发者工具配置文件。

小程序的每一个页面都由以下四个文件构成：

1. 配置代码JSON文件 - 单个页面的配置文件，可配置窗口背景、导航栏颜色、自定义组件等。
   
2. 模板代码 WXML 文件 - 小程序自带的类html模板，有相似vue的数据绑定和if/else、for等控制能力。
   
3. 样式代码 WXSS文件 - 局部样式文件，只对该页面生效。
   
4. 逻辑代码JavaScript文件 - 调用Page方法注册页面实例，指定页面的初始数据、生命周期回调和事件处理函数等。

生命周期

• 小程序生命周期（执行顺序由上往下）

onLaunch() {
  console.log('onLaunch监听小程序初始化');
}

onShow() {
  console.log('onShow监听小程序显示');
}

onHide() {
  console.log('onLaunch监听小程序隐藏');
}
复制代码

• 页面生命周期（执行顺序由上往下）

onLoad(options) {
    console.log('onLoad监听页面加载');
  }

  onReady() {
    console.log('onReady监听页面初次渲染完成');
  }

  onShow() {
    console.log('onShow监听页面显示');
  }

  onHide() {
    console.log('onHide监听页面隐藏');
  }

  onUnload() {
    console.log('onUnload监听页面卸载');
  }复制代码

通常状况下，小程序的生命周期函数执行先于页面的生命周期函数。

自定义组件

组件文件相似页面结构，也有四个文件。

1.  json 文件中进行自定义组件声明

   {
     "component": true
   }
   复制代码

2. wxml文件

   <view>
   <view class="inner">{{innerText}}</view>
   <slot></slot></view>复制代码

3. wxss文件

   .inner {
     color: red;
   }复制代码

4. js文件，使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

   Component({
     properties: {
       // 这里定义了innerText属性，属性值能够在组件使用时指定
       innerText: {
         type: String,
         value: 'default value',
       }
     },
     data: {
       // 这里是一些组件内部数据
       someData: {}
     },
     methods: {
       // 这里是一个自定义方法
       customMethod() {}
     }
   })复制代码

几个tips：

1. wxml中{{}}没法调用js中的方法，但可以使用小程序自身的 wxs 脚本中的方法。
2. wxss拥有大部分css特性，有两点区别于css。
• 尺寸单位-rpx（根据屏幕宽度自适应。小程序规定屏幕宽度为750rpx，即对于宽度为750的设计稿，1rpx对应1px）
• 样式导入-import（可导入其余wxss文件）

全局变量

小程序提供了globalData来存储全局通用数据。

1. 在app.js内声明全局变量

   globalData: {    userInfo: null,    city: ""  }复制代码

2. 在其余页面获取或修改全局变量

   const app = getApp();
   
   app.globalData.userName = "Tom"复制代码

状态管理

小程序经过页面或组件各自的 setData 再加上父子、兄弟间等等组件间的通信会让代码很乱，若是再加上跨页面之间的组件通信，会让程序很是难维护和调试。

小程序的工程化已经作得十分完善，目前最大的痛点就在于状态管理和跨页通信了。

介绍下腾讯开源的一款状态管理解决方案---Westore。

以天气小程序为例。

城市为首页和搜索页都控制的数据。

1. 定义一个全局store：stroe.js（curcity初始值为null）

   
   

2. 首页获取位置信息，更新curcity，获取天气数据

3. 搜索页，输入城市，更新curcity，回到首页

   
   

4. 首页监听curcity变化，从新获取天气信息

   
   

开发完成

当小程序开发完成，真机调试结束后，即可以上上传咱们的代码至微信服务器。固然开发者工具也提供了git来管理咱们的代码。

代码上传完毕后，可登陆微信公众平台小程序模块，管理 -> 版本管理页面，提交审核咱们的代码版本，待审核完毕后，即可发布咱们的小程序，也可延迟提交审核咱们的代码，先将代码设为体验版本，再经过 管理 -> 成员管理 设置咱们的微信好友进行小规模体验测试。

关于云开发

开发者无需搭建服务器，就可根据提供的api进行核心业务的后端开发工做。

目前提供三大基础能力支持：
云函数：能够认为就是后端函数，微信私有协议自然鉴权，开发者只需编写自身业务逻辑代码
数据库：一个既可在小程序前端操做，也能在云函数中读写的 JSON 数据库
文件存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理

优势： 云开发小程序，经过提供客户端 API 的方式，封装了不少服务处理和管理维护的过程，使得服务架构对小程序开发者的门槛大大下降。开发者只须要使用 Javascript 一种语言，结合提供的 API，能够完成小程序的开发、服务的业务逻辑编写、数据管理、用户管理，也省去了不少系统安全、服务搭建、性能维护等工做。