微信小程序-基础介绍篇

本文属个人笔记，不做详解，仅供参考！

小程序官方简易教程

微信小程序与HTML5的区别

• 开发工具的不同：
  微信小程序---微信web开发者工具,可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。
  HTML5---开发工具+浏览器Device Mode预览的模式。

• 开发语言不同：
  微信小程序---腾讯开发的一套WXML标签语言和WXSS样式语言。
  HTML5---标准的HTML5+CSS3。

• 执行速度不同：
  微信小程序---两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度。
  HTML5---传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。

---

体验小程序

• 创建项目（微信公众平台注册小程序后可获取AppID）
  
  

  创建项目.png

问：AppID有什么用？

答：1.只有绑定了AppID的小程序才可在真机上预览；2.配置request、uploadFile、socket、downloadFile合法域名（如果创建时填写了AppID，但未配置合法域名，代码中的网络请求是会报红的）；3.发布小程序时AppID是必须要有的。

问：在哪里配置合法域名？为什么别人家的小程序头像那么炫酷，是怎么做到的？

答：登录微信公众平台，左侧菜单栏->设置->基础设置，这里可以更换小程序的名称、图标等；左侧菜单栏->设置->开发设置，这里配置合法域名。
【注意】
1.未发布的小程序有两次修改名称的机会，发布后理论上也是可以修改的，但是比较麻烦，具体请关注官方文档。
2.小程序图标每月有5次修改机会，无论上线与否。
3.小程序介绍每月有5次修改机会，无论上线与否。当你搜索小程序时，介绍会展示在名称下面。
4.个人开发者无法完成微信认证，不具备微信支付能力等。
5.服务类目每月有3次修改机会，无论上线与否。选择你的小程序设计的服务类目，不要越界。

• 目录结构
  一个小程序页面由四个文件组成，分别是：.js(必填)、json(选填)、.wxml(必填)、.wxss(选填)。
  .js：页面逻辑（编写逻辑代码）
  .json：页面配置（可修改导航栏标题、颜色，设置是否支持刷新等）
  .wxml：页面结构（UI控件写在这里，例如view、input、button等）
  .wxss：页面样式表（css样式写在这里，例如背景色、尺寸大小等）
• 生命周期函数方法

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数-监听页面加载（只在加载页面时触发一次）
onReady	Function	生命周期函数-监听页面渲染完成
onShow	Function	生命周期函数-监听页面显示（页面每次重新显示都会触发该方法）
onHide	Function	生命周期函数-监听页面隐藏（前后台切换会触发该方法）
onUnload	Function	生命周期函数-监听页面卸载（退出页面栈时触发该方法）

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

• 配置tabBar菜单

tabBar.png

如上图，底部的tabBar标签最多可配置5个。需准备10张图片（5张默认图、5张选中图），字体颜色也可修改。
操作步骤：打开app.json，添加"tabBar"代码。

tabBar-code.png