微信小程序(一) -- 走出第一步

一、从微信小程序平台申请账号，拿到appid
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
1、用未曾注册或绑定的邮箱注册
2、绑定一个微信号作为管理号
3、点击详情获取appid：

---

二、下载微信开发工具并新建一个项目
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

---

三、学会阅读微信小程序开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/
下面我们一边看开发文档一边学习小程序的基本知识（重点知识）：

1. 小程序运行原理？
   打开微信app，随便打开一个小程序，可以看到小程序的界面跟app的没啥区别，但是它的实现是基于微信app的基础上的，看文档：
   

从开发文档的上图可见，微信小程序开发跟前端开发（html+js+css）的结构非常类似，看文档描述如下图：
也就是说，小程序在微信的基础上用多个线程来渲染画面，另用一个线程来跑页面的js逻辑，他们之间的数据通信是经由微信客户端来传递的，所以一是js运行不会造成页面渲染卡顿，二是数据的传递会被微信客户端监管（比如请求外部链接会被监控到），正因小程序的通信能力建立在微信客户端上，所以小程序可以获得微信客户端提供的很多基础能力（比如从微信获取用户信息，微信的支付功能等等）。

---

2. 小程序的开发工具是怎样的？
   
   模拟器：预览当前代码的效果
   资源管理器：查看整个项目的目录和文件结构
   调试器：如下图
   

---

3.小程序项目的文档结构是怎样的？
接下来我们从无到有来看哪些文件是必须的：

---

1）一个文件也没有的项目：

---

2） 创建基本的文件：

project.config.json：必需，项目的配置文件

app.json：必需，小程序的配置文件(如下配置一个首页page地址a/b.wxml)：

//app.json
{
  "pages": [
    "a/b"
  ],
  "window": {
  },
  "sitemapLocation": "sitemap.json"
}

app.js：必须，用于创建一个小程序实例：

//app.js

//App({})是实例化一个app的实例，其他js文件通过getApp()获取到
App({
  //app加载
  //app启动
  //app与页面渲染通信数据
  //...
})

以上是app层面的文件。下面是page页面层面，一般来说小程序每个page页面都有wxml+js+wxss+json的文件结构，在这里，只创建了必需的js和wxml文件：

//b.wxml
<!-- 页面内容 -->
<text>miniprogram/a/b.wxml</text>

//b.js
//实例化初始化Page实例
Page({
  
})

就上面这些文件，一个微信小程序已经能跑起来了，整体来说就是:

• project.config.json配置文件设置了在开发工具中的项目的配置（比如使用的库版本）
• app.json配置文件设置了小程序的配置（比如首页，整体风格）
• app.js实例化了一个app对象（App({})）
• page.js，打开每个页面的时候，都会通过当前页面的js文件实例化一个page对象（Page({})）

---