1.在微信官网下载开发工具
2.新建小程序项目
---AppID：如果有就填写，如果没有点击绿色文字跳过填写，（没有也可以开发只不过没有在手机预览的功能）；
---项目名称：命名一个简单明了的名称；
---项目目录：选择一个开发的文件夹，此时项目目录下方会出现一个创建quick start项目的选项，这里可以快速帮你构建一个项目的完整目录，不建议取消勾选。（如果要打开其他人的demo需要选择到pages文件夹的上一层级，不然无法显示）；
---点击添加项目进行下一步；
Tips:在设置中有设置代理选项，注意在这里如果设置了代理，有可能在编辑器内显示空白；
3.小程序结构简介
其中，.wxml 是页面的结构文件，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。
├───app.js // 小程序逻辑
├───app.json // 小程序公共设置
├───app.wxss // 小程序公共样式
├───utils // 用来放置工具类js文件
│ └───utils.js // 工具类js
└───pages // 项目页面开发目录，里面的每个子目录代表一个独立页面
├───index // index 页面目录
│ ├───index.js // index 页面逻辑
│ ├───index.wxml // index 页面结构
│ └───index.wxss // index 页面样式表
└───logs // logs 页面目录
├───logs.js // logs 页面逻辑
├───logs.json // logs 页面数据
├───logs.wxml // logs 页面结构
└───logs.wxss // logs 页面样式表
在pages中建立的页面都需要在根目录下的app.json声明，相当于设置路由,其他公共设置也需要在这里设置;官方教程
<!--js-->
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
Tips:
---数组的第一项代表小程序的初始页面;
---小程序中新增/减少页面，都需要对 pages 数组进行修改，特别的，如果减少页面但是未修改pages的数组，编译会抛出异常;
---在这里修改数组后框架会自行去寻找路径中的文件，如果路径中的json文件内容为空的话，会抛出异常;
---同样的，路径中js为空也会抛出“Page调用异常”的错误，所以要在js中加入“Page({})”;
4小程序开发
4.1.数据绑定官方教程
微信小程序数据绑定使用"Mustache"语法（双大括号）将变量包起来；
<!--wxml-->
<view> {{message}} </view>
<!--js-->
Page({
data: {
message: 'Hello MINA!'
}
})
当需要展示一组数据时，可以使用wx:for;更多使用方法
<view wx:for="{{array}}" wx:for-item="item">
{{index}}: {{item.message}}
</view>
Tips:默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
<!--js-->
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
取值传值方式
1.列表index下标取值，并且在页面传值
实现方式是：data-index="{{index}}"赋值及e.currentTarget.dataset.index来获取即可；
从服务列表页中传服务id到服务详情页面，以获取服务详情信息；
server/list页面实现以下代码
<!--wxml-->
<view bindtap="detailmovie" id="{{item.id}}">
<view class="move-min">
<view class="move-image">
<image src="{{item.images.large}}"></image>
</view>
<view class="title">{{item.title}}</view>
</view>
</view>
<!--js-->
detailmovie: function (e) {
//使用currentTarget获取id
var id = e.currentTarget.id;
//把获取到的id存在全局变量中，下一个页面直接调用;
app.requestDetailid = id;
console.log(id);
//一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo,
wx.navigateTo({
url: '../detail/detail',
})
},
页面实现onLoad(options)方法，从url路径中获取objectId;
<!--js-->
onLoad: function (options) {
var objectId = options.objectId
}
2.form表单取值
通过<form bindsubmit="formSubmit">与<button formType="submit">标签配合使用
布局如下：
<!--wxml-->
<form bindsubmit="formSubmit">
<input name="detail" placeholder="详情地址" />
<input name="realname" placeholder="收件人姓名" />
<input name="mobile" placeholder="手机号码" type="number"/>
<button formType="submit" type="primary">Submit</button>
</form>
<!--js-->
formSubmit: function(e) {
// detail
var detail = e.detail.value.detail;
// realname
var realname = e.detail.value.realname;
// mobile
var mobile = e.detail.value.mobile;
}
通过<input bindconfirm="realnameConfirm">实现
<!--js-->
realnameConfirm: function(e) {
var realname = e.detail.value;
}
Tips：
1: 视图层嵌入的是{{message}}而不是{{data.message}}，微信框架默认设定视图层绑定的变量定义在Page对象的data属性中，也就是说，如果变量需要绑定到视图层，一定要定义data属性中；
2: 通过调用Page对象的setData(Page对象预定义)方法，可以更新界面数据，但是直接设置变量是无效的，因此对于绑定到视图层的变量，要永远使用setData方法来设置变量值；
4.2.文件引入
为了提升体验流畅度，编译后的代码包大小需小于 1MB ，大于 1MB 的代码包将上传失败
1.1 WXML
WXML提供两种文件引入方式，import和include。区别在于：import可以引入定义好的template模板，模板是有作用域的；而include就是拷贝一个公用的代码片段到目标文件中，适合做公共页面片的拆分。
import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
Tips:
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
1.2 wxss
小程序支持样式的@import引入方式
import "../../wxss/common.wxss";
```
######Tips:
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
小程序支持的选择器在官方公布的文档中包括.class、#id、 element、element,element、::after(注意是双冒号)、::before这6种选择器。
经过测试，小程序对于:first-child、:last-child、.class-a .class-b{}，甚至更多层级的嵌套都是支持的。
不过官方并不推荐级联的这种写法，因为考虑到后面切Native的扩展可能，会没办法支持级联选择。
所以保险起见，不建议.class-a .class-b{}这种级联的写法，以免后期工具过滤导致页面错乱。
WXSS支持的单位有px、rem和rpx，其中rem和rpx可以针对屏幕容器进行适配，px则为固定尺寸。
其中1rpx=0.5px，在WXSS和WXML中定义的rpx单位最终会转换为在手机端可以识别的rem单位。
Tips：navigator仅支持5级页面的跳转； navigator不可跳转到小程序外的链接地址；[官方教程](https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html)
小程序的image与HTML5的img最大的区别在于：小程序的image是按照background-image来实现的。 默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽，auto在这里不生效。[官方教程](https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html)
####4.3.API的使用
#####1wx.request[官方教程](https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html)
wx.request ≈ ajax；
```
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
```
微信小程序POST请求服务端获取不到参数
1.需要把Content-type改成‘application/x-www-form-urlencoded’才可以正常获取
2.修改Content-type后，请求参数不会自动序列化，需要使用JSON.stringify转化字符串才可以正常请求
客户端
```
wx.request({
url: '/index',
method: 'POST',
data: {
answer: JSON.stringify(needData),
},
header: { "content-type": "application/x-www-form-urlencoded" },
dataType: "json",
success: function (data) {
that.setData({
showLoading: false,
data: data.data,
});
},
});
```
服务器端
```
public function answer(){
$answer=I('post.answer');
$answer=htmlspecialchars_decode($answer);
$answer=json_decode($answer);
}
```
Tips: wx.request发起的是 HTTPS 请求。HTTP请求只能在本地预览，若要在真机预览需要打开调试模式；
[微信豆瓣小程序demo下载地址](https://github.com/wulitang/wxapp.git)
网友评论