2020-10-30

微信小程序制作（一）

什么是小程序？
小程序是一个基于微信的app，便于进行混合式开发。可以在安卓，ios，pc上运行。
微信小程序开发工具
官方在网站发布了最新版本的微信小程序开发工具，
http://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
开发第一个微信小程序

1. 获取小程序的appid
   开发者开发的微信小程序要发布到微信运行的话，首先要获取小程序的appid。
   注意：这是小程序专属的appid，不要和微信服务号和公众号的id搞混
2. 创建项目
   2.1 登录
   2.2 添加项目
   2.3 微信小程序主要文件
   app.js、app.json、app.wxss
   其中js是脚本文件，json是配置文件，wxss是样式表文件
   提示：如果创建项目时没有选择“在当前目录中创建quick start项目”复选框，项目目录中将不会添加任何文件。
3. 认识开发工具
   3.1.模拟器
   首先进入微信小程序开发工具后就看到的是调试界面，在这个界面中，模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大多数的api均能够显示出正确的状态。
   如果在微信小程序中用到了多窗口，上方将增加一个”正在调试2个页面“的提示（这个功能是为了方便开发者设计的，实际小程序中没有）
   3.2.调试工具
   console，sources，network，appdata，storage，wxml
   3.2.1 console
   控制面板
   可以直接在console中输入javascript代码并立即执行。
   3.2.2 sources
   脚本文件
   与浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在sources面板中开发者看到的文件是经过处理的脚本文件，开发者的代码都会被包裹在define函数中，并且对于page代码，在尾部会有require的主动调用。
   3.3.3 network
   用于观察和显示网络请求request和socket的情况。通过这个面板可对网络请求进行调试。微信小程序作为前台表示层，通常需要访问后台服务程序。前后台之间的交互需要通过网络接口来是西安。这是就需要通过network面板来观察发送的请求和接受的响应数据是否相同。
   3.3.4 appdata面板
   appdata面板用于显示当前项目中的具体数据。
   3.3.5 storage面板
   storage面板用于显示当前项目使用本地存储的情况。在小程序中可以使用wx.setStorage或者wx.setStorageSync将数据保存到本地。
   3.3.6 wxml面板
   wxml面板用于帮助开发者查看wxml转化后的界面。在这里可以看到真实的页面结构以及结构对应的wxss属性，同时可以通过修改wxss属性，在模拟器中看到修改的结果。
   在调试小程序的界面布局时，经常需要在右侧输入wxss代码，然后查看左侧模拟器中是否达到效果，最后将达到效果的wxss代码复制到对应的wxss文件中即可。