直接开始，简单理解就是微信作为原生层，我们的应用作为网页，是一种 hybird 的开发方式，唯一不同的是，在这个平台上必须遵守微信的一些设计规范、运营规范等东西。
官方资料
开发工具
官方已出正版，可直接使用无 appid 进行体验
下载地址
使用的开发元素
- JavaScript （交互、数据等脚本）
- wxml （页面结构、组件）
- wxss（页面样式）
wxml 和 wxss 是新的文件格式，不用理解，就映射成 html 和 css 即可，但是不同的是，有一套自己的标签和支持的范围（比如 css 部分支持度有限），详情可以看上面的官方资料。
项目的结构
下载到 DEMO 过后，就会有一个基本的项目结构，相当简单。
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── index
│ └── logs
└── utils
└── util.js
其他就不看了，直接看 app.json 这一个文件即可，这是一个全局 app 的配置文件，具体详情：文档
有很多配置，具体看文档，这里主要说一下三个配置：
- 导航、标题部分 使用的是原生 header, 只能改变: 导航栏的颜色，不能修改其中的内容。导航，需要开发者自己控制（微信规定，页面路径只能是五层）。
- pages 部分 默认加载第一个页面，其余靠跳转
- 底部导航（tabBar） 只能配置最少 2 个、最多 5 个 tab。
其余配置就不需要怎么了解了，根据后面的小栗子来
hello world
app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
|
- app.js
App({}) // 暂时先什么都不管
pages/index/index.js
Page({
data: {
hello: "Hello World",
}
});
pages/index/index.wxml
<view class="container">
<text>{{hello}}</text>
</view>
|
输出就不用截图了，就是替换 {{hello}} => 'Hello World'
可以看出，app.js 是启动的入口文件，然后 pages 目录下面都有一个 Page 对象来做页面封装，然后再渲染到页面中，启动结构: App => Pages 的模式，典型的类 App 开发（ manager => activity）。
使用过 angularjs 或者 vue 等框架的直接就可以上手了，MVVM 模式，但是唯一不一样的是提供手动触发界面渲染，使用 this.setData() 方法，具体查看 API 或者跟我一起看后面的栗子。
一个简单的静态表单
在微信提供的这套框架中，提供了很多组件，这里用一个静态表单的代码来感性认识一下，具体的还得你看 API 了哦。
注：栗子都是修改 app.json 中的 pages 配置，直接默认预览，因为不想受 navigate 的跳转影响，那个很简单，看 API 传参数即可。
要做的效果是：
