哈哈哈，领导给了我可以实战小程序的机会，激动（因为可以学习到小程序开发的知识）忧心（上手项目快不快），废话不多说，我要开始学习了～
一、认识一下小程序
1.小程序的主要开发语言是 JavaScript
2.小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具
运行环境 逻辑层 渲染层
iOS JavaScriptCore WKWebView
Android V8 chromium定制内核
小程序开发工具 NWJS Chrome WebView
3.下面这个二维码是官方提供的Demo，可以清楚的看到微信小程序都支持哪些功能
Demo源码地址：https://github.com/wechat-miniprogram/miniprogram-demo
二、HelloWorld小程序
1.申请一个小程序账号（要拿到AppID等信息～）
2.安装开发工具（这里就不详细说了）
3.新建一个小程序（输入项目名称、路径即可自动打开）
4.运行自带HelloWorld的小程序（点击开发工具顶部菜单的编译）
5.下面恭喜你，你的第一个Helloworld小程序成功出炉～哈哈哈，第一步没想象那么难啊
三、小程序的代码构成
1.上面我们创建的第一个小程序所在的文件夹你会发现有很多文件，让我们来认识下吧
.json： JSON配置文件
.wxml： WXML模版文件
.wxss： WXSS样式文件
.js：脚本逻辑文件
2.JSON配置 （ JSON是一种数据格式，在小程序中JSON扮演的静态配置的角色。）
app.json： 小程序全局配置。包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
project.config.json： 工具配置。就是书开发工具的样式，个性化自我设置都会写入这个文件中，当你换电脑的时候也可以使用该个性化工具配置～包括编译器颜色、代码上传时自动压缩等等一系列选项。
page.json： 页面配置。就是你pages文件夹下的所有.json文件，主要是让开发者可以独立定义每个页面的一些属性，比如顶部颜色、是否允许下拉刷新等。
3.WXML模版（网页编程采用HTML+CSS+JS，其中HTML用来描述当前这个页面的结构，CSS用来描述页面的样子，JS用来处理这个页面与用户的交互，同样道理，小程序中的WXML充当类似的角色，打开pages/index/index.wxml去看看里面内容吧）
特别提示：组件标签会在页面上渲染<view>，非组件标签它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染，请看下面的示例吧
<view></view>： 视图标签
<button></button>： 按钮标签
<text></text>： 文本标签
<block></block> ： 搭配wx:for、wx:if、wx:elif、wx:else使用
示例一：
<block wx:for="{{[1, 2, 3]}}">
<view>{{index}}:</view>
<view>{{item}}</view>
</block>
示例二：
<block wx:if="{{boolean==true}}">
<view class="bg_black"></view>
</block>
<block wx:elif="{{boolean==false}}">
<view class="bg_red"></view>
</block>
<block wx:else>
<view class="bg_red"></view>
</block>
示例三：
<text>{{msg}}</text> // WXML渲染（界面结构）
this.setData({ msg: "Hello World"}) /// JS逻辑（JS）
JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
{{}}这个语法是把一个变量绑定到界面上，称之为数据绑定。搭配if语句实现完全绑定，仅仅那个语法不够完全哦～
4.WXSS样式（具有CSS大部分特性，就是界面样式咯）
在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
app.wxss：全局样式，会作用于当前小程序的所有页面
page.wxss：局部页面样式，仅对当前页面生效
5.JS 逻辑交互（用户交互：用户点击事件，获取用户位置等等，过编写 JS 脚本文件来处理用户的操作。可以在JS中调用小程序的丰富API哦）
示例：点击Button时候希望将界面上的msg显示为Hello World
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
Page({
clickMe: function() {
this.setData({ msg: "Hello World " })
}
})
四、小程序宿主环境
1.微信客户端给小程序所提供的环境为宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。
2.小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理。渲染层的界面使用了WebView 进行渲染，逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程。逻辑层发送网络请求也经由Native转发。（如下图）
3.微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径。而写在 pages 字段的第一个页面就是这个小程序的首页。于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行。整个小程序只有一个 App 实例，是全部页面共享的。
4.一个页面包含4个文件，.js.json.wxml.wxss，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js。
5.Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
6.在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。
7.组件：小程序提供了丰富的基础组件给开发者，在WXML写上对应组建的标签名字就可以把该组件显示在界面上。使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现。组件的内部行为也会通过事件的形式让开发者可以感知，例如用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理。当然你也可以通过 style 或者 class 来控制组件的外层样式，以便适应你的界面宽度高度等等。
示例：地图一开始的中心的经纬度是广州
<map></map>
<map longitude="广州经度" latitude="广州纬度"></map>
<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>
8.API：小程序提供了很多 API 给开发者去使用，多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。
示例一：获取用户的地理位置
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 纬度
var longitude = res.longitude // 经度
}
})
示例二：调用微信扫一扫能力
wx.scanCode({
success: (res) => {
console.log(res)
}
})
五、小程序协同工作和发布
1.在小程序的平台里，开发者完成开发之后，需要在开发者工具提交小程序的代码包，然后在[小程序后台](https://mp.weixin.qq.com/)发布小程序，用户可以通过搜索或者其它入口来进入该小程序。
2.协同工作：项目管理成员负责统筹整个项目的进展和风险、把控小程序对外发布的节奏，产品组提出需求，设计组与产品讨论并对需求进行抽象，设计出可视化流程与图形，输出设计方案。开发组依据设计方案，进行程序代码的编写，代码编写完成后，产品组与设计组体验小程序的整体流程，测试组编写测试用例并对小程序进行各种边界测试。（项目管理、产品组、设计组、开发组、测试组）灰度发布，就是分阶段发布，控制风险很好使哦～
六、目录结构 - 文件详解
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表
page.js 页面逻辑
page.wxml 页面结构
page.json 页面配置
page.wxss 页面样式表
网友评论