小程序初级开发实践

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

前期准备

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

几个tips：

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

开发阶段

项目结构

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

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

配置代码JSON文件 - 单个页面的配置文件，可配置窗口背景、导航栏颜色、自定义组件等。
模板代码 WXML 文件 - 小程序自带的类html模板，有类似vue的数据绑定和if/else、for等控制能力。
样式代码 WXSS文件 - 局部样式文件，只对该页面生效。
逻辑代码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监听页面卸载');
  }复制代码

一般情况下，小程序的生命周期函数执行先于页面的生命周期函数。

自定义组件

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

json 文件中进行自定义组件声明
```
{
  "component": true
}
复制代码
```

wxml文件

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

wxss文件
```
.inner {
  color: red;
}复制代码
```

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

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

几个tips：

wxml中{{}}无法调用js中的方法，但可使用小程序自身的 wxs 脚本中的方法。
wxss拥有大部分css特性，有两点区别于css。

尺寸单位-rpx（根据屏幕宽度自适应。小程序规定屏幕宽度为750rpx，即对于宽度为750的设计稿，1rpx对应1px）
样式导入-import（可导入其他wxss文件）

全局变量

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

在app.js内声明全局变量

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

在其他页面获取或修改全局变量

const app = getApp();

app.globalData.userName = "Tom"复制代码

状态管理

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

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

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

以天气小程序为例。

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

定义一个全局store：stroe.js（curcity初始值为null）
首页获取位置信息，更新curcity，获取天气数据
搜索页，输入城市，更新curcity，回到首页
首页监听curcity变化，重新获取天气信息

开发完成

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

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

关于云开发

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

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