小程序40分钟教程

Posted on | In | | 次阅读

本篇教程主要关注于原生小程序的开发过程及基本情况介绍（最好先从原生的小程序开始写起，在熟练了小程序的写法之后，再来添加框架来写）

一.项目初始化过程：

直接创建一个空文件夹，通过微信小程序工具的quickstart创建文件，生成文件列表，创建的结果如图1
图1

二.项目基本结构

  1. 项目整体结构
    包含两个文件夹（pages，utils）和四个项目配置文件(app.js,app.json,app.wxss,
    project.config.json)
    图2
    2.pages文件夹
    pages的每一个文件夹都代表小程序里的一个页面，每个页面被分为4个文件，文件名称保持一致，根据文件除后缀不同的内容进行识别
    图3
    （1）文件夹中有四种文件类型
    js ———- JavaScrip文件，和用户交互的内容
    json ——– 项目配置文件，负责窗口颜色等等
    wxml ——- 类似HTML文件，描述页面的结构，通过数据绑定将变量绑定到界面上
    wxss ——- 类似CSS文件，配置页面的样式
    （2）装载过程
    先根据json文件配置成一个界面，定义顶部颜色、文字等内容，然后装载WXML结构和WXSS样式，最后装载js文件，页面渲染完毕后会出现最终的结构
  2. 项目基础配置文件
    app.js：小程序(全局)逻辑
    app.json：小程序(全局)公共设置，决定页面文件的路径、窗口表现、设置网络超时时间、设置底部tab 等
    app.wxss：小程序公共(全局)样式表
    project.config.json：setting、项目名称、appId内容在内的项目配置；做过前端的项目会比较熟悉，类似于package.json文件

三.项目的加载顺序

  1. 项目整体加载
    (1)用户首次打开小程序，触发 onLaunch（全局只触发一次）
    (2)小程序初始化完成后，触发onShow方法，监听小程序显示
    (3)小程序从前台进入后台，触发 onHide方法
    (4)小程序从后台进入前台显示，触发onShow方法
    (5)小程序后台运行一定时间，或系统资源占用过高，会被销毁。
  2. 页面加载顺序
    (1)小程序注册完成后，加载页面，触发onLoad方法。
    (2)页面载入后触发onShow方法，显示页面。
    (3)首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
    (4)当小程序后台运行或跳转到其他页面时，触发onHide方法。
    (5)当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
    (6)当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。同时，应用生命周期会影响到页面生命周期。

四.小程序的逻辑

  1. 从组成一个页面的四个文件，还是从package.config.json文件都可以看出，微信小程序的众多配置和HTMl页面、前端项目都很相似
  2. 小程序的逻辑结构，类似于MVVM的开发模式（React、Vue），JS并不直接操控DOM，JS只需要管理状态即可，再通过一种模版语法来描述状态和界面结构的关系即可
  3. JSBridge下架起上层开发与Native（系统层）的桥梁，使得小程序可通过API使用原生的功能，且部分组件为原生组件实现，从而有良好体验
    JSBridge：各种 Web 页面可以通过 Bridge 调用微信提供的一些原生功能，为用户提供相关的功能。

五.相应的框架和组件库

  1. 组件库
    (1)WeUI： WeUI 是一套同微信原生视觉体验一致的基础样式库,在调用的时候实际只定义了WXSS文件
    (2)iView
    https://weapp.iviewui.com/
    iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称
    (3)ZanUI
    https://cnodejs.org/topic/589d625a5c8036f7019e7a4a
    ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。 包含 badge、btn、等共计 17 类组件或元素。
  2. 框架选择：
    (1)官方框架MINA：它类似于淘宝Weex、Vue框架
    (2)美团小程序框架mpvue：基于 Vue.js 核心，mpvue 修改了 Vue.js 的runtime和compiler 实现，使其可以运行在小程序环境中
    Github：https://github.com/Meituan-Dianping/mpvue
    官网： http://mpvue.com/
    (3)Tina.js: 轻盈小巧,保留 MINA (微信小程序官方框架) 的大部分 API 设计
    (4)WePY: 让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。
    特点：类Vue开发风格，支持引入NPM包，指出插件等
    Github地址:
    https://github.com/Tencent/wepy
    官网地址：
    https://tencent.github.io/wepy

写在最后：1. 微信小程序的开发很可能会出现一些反应不及时的问题，关闭重新打开是个必要的手段

  1. https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html 微信小程序的API内容是比较齐全的，多看一看

2个小时作业安排:

  1. 通过微信开发者工具的QuickStart创建新工程
  2. 通过设置小程序window属性，设置页面标题为WechatTutorial
  3. 修改index页面如图，如图添加姓名，邮箱，昵称信息，并修改字体颜色和字体大小
  4. 添加cal页面
  5. 在页面中添加2个tabBar,设置选择颜色为蓝色
  6. 设置第一个tabBar为“登陆”，指向index页面
  7. 设置第二个tabBar为“计算器”，指向cal页面
  8. 当小程序退出之后再进入页面，设置显示“小程序重启成功”的提示
    图4

作业：
如图完成计算器的基本功能
图5