1.在微信官網(wǎng)下載開發(fā)工具

2.新建小程序項目

---AppID：如果有就填寫蠢壹，如果沒有點(diǎn)擊綠色文字跳過填寫，（沒有也可以開發(fā)只不過沒有在手機(jī)預(yù)覽的功能）；
---項目名稱：命名一個簡單明了的名稱他托；
---項目目錄：選擇一個開發(fā)的文件夾，此時項目目錄下方會出現(xiàn)一個創(chuàng)建quick start項目的選項仆葡，這里可以快速幫你構(gòu)建一個項目的完整目錄赏参，不建議取消勾選。（如果要打開其他人的demo需要選擇到pages文件夾的上一層級沿盅，不然無法顯示）把篓；
---點(diǎn)擊添加項目進(jìn)行下一步；
Tips:在設(shè)置中有設(shè)置代理選項腰涧，注意在這里如果設(shè)置了代理韧掩，有可能在編輯器內(nèi)顯示空白；

3.小程序結(jié)構(gòu)簡介

其中窖铡，.wxml 是頁面的結(jié)構(gòu)文件疗锐，.js后綴的是腳本文件坊谁，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件滑臊。

├───app.js // 小程序邏輯
├───app.json // 小程序公共設(shè)置
├───app.wxss // 小程序公共樣式
├───utils // 用來放置工具類js文件
│ └───utils.js // 工具類js
└───pages // 項目頁面開發(fā)目錄口芍，里面的每個子目錄代表一個獨(dú)立頁面
├───index // index 頁面目錄
│ ├───index.js // index 頁面邏輯
│ ├───index.wxml // index 頁面結(jié)構(gòu)
│ └───index.wxss // index 頁面樣式表
└───logs // logs 頁面目錄
├───logs.js // logs 頁面邏輯
├───logs.json // logs 頁面數(shù)據(jù)
├───logs.wxml // logs 頁面結(jié)構(gòu)
└───logs.wxss // logs 頁面樣式表

在pages中建立的頁面都需要在根目錄下的app.json聲明，相當(dāng)于設(shè)置路由,其他公共設(shè)置也需要在這里設(shè)置;官方教程

<!--js-->
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

Tips:

---數(shù)組的第一項代表小程序的初始頁面;
---小程序中新增/減少頁面雇卷，都需要對 pages 數(shù)組進(jìn)行修改鬓椭，特別的，如果減少頁面但是未修改pages的數(shù)組关划，編譯會拋出異常;
---在這里修改數(shù)組后框架會自行去尋找路徑中的文件小染，如果路徑中的json文件內(nèi)容為空的話，會拋出異常;
---同樣的贮折，路徑中js為空也會拋出“Page調(diào)用異晨泗妫”的錯誤，所以要在js中加入“Page({})”;

4小程序開發(fā)

4.1.數(shù)據(jù)綁定官方教程

微信小程序數(shù)據(jù)綁定使用"Mustache"語法（雙大括號）將變量包起來调榄；

<!--wxml-->
<view> {{message}} </view>
<!--js-->
Page({
  data: {
    message: 'Hello MINA!'
  }
})

當(dāng)需要展示一組數(shù)據(jù)時踊赠，可以使用wx:for;更多使用方法

<view wx:for="{{array}}" wx:for-item="item">
  {{index}}: {{item.message}}
</view>

Tips:默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項的變量名默認(rèn)為item

<!--js-->
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

取值傳值方式

1.列表index下標(biāo)取值振峻，并且在頁面?zhèn)髦?br> 實現(xiàn)方式是：data-index="{{index}}"賦值及e.currentTarget.dataset.index來獲取即可臼疫；
從服務(wù)列表頁中傳服務(wù)id到服務(wù)詳情頁面，以獲取服務(wù)詳情信息扣孟；
server/list頁面實現(xiàn)以下代碼

<!--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存在全局變量中烫堤，下一個頁面直接調(diào)用;
    app.requestDetailid = id;
    console.log(id);
    //一個應(yīng)用同時只能打開5個頁面，當(dāng)已經(jīng)打開了5個頁面之后凤价，wx.navigateTo不能正常打開新頁面鸽斟。請避免多層級的交互方式，或者使用wx.redirectTo,
    wx.navigateTo({
      url: '../detail/detail',
    })
  },

頁面實現(xiàn)onLoad(options)方法利诺，從url路徑中獲取objectId;

<!--js-->
onLoad: function (options) {
  var objectId = options.objectId
}

2.form表單取值
通過<form bindsubmit="formSubmit">與<button formType="submit">標(biāo)簽配合使用
布局如下：

<!--wxml-->
<form bindsubmit="formSubmit">
  <input name="detail" placeholder="詳情地址" />
  <input name="realname" placeholder="收件人姓名" />
  <input name="mobile" placeholder="手機(jī)號碼" 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">實現(xiàn)

<!--js-->
realnameConfirm: function(e) {
  var realname = e.detail.value;
}

Tips：

1: 視圖層嵌入的是{{message}}而不是{{data.message}}富蓄，微信框架默認(rèn)設(shè)定視圖層綁定的變量定義在Page對象的data屬性中，也就是說慢逾，如果變量需要綁定到視圖層立倍，一定要定義data屬性中；

2: 通過調(diào)用Page對象的setData(Page對象預(yù)定義)方法侣滩，可以更新界面數(shù)據(jù)口注，但是直接設(shè)置變量是無效的，因此對于綁定到視圖層的變量君珠，要永遠(yuǎn)使用setData方法來設(shè)置變量值寝志；

4.2.文件引入

為了提升體驗流暢度，編譯后的代碼包大小需小于 1MB ，大于 1MB 的代碼包將上傳失敗

1.1 WXML

WXML提供兩種文件引入方式材部，import和include毫缆。區(qū)別在于：import可以引入定義好的template模板，模板是有作用域的乐导；而include就是拷貝一個公用的代碼片段到目標(biāo)文件中苦丁，適合做公共頁面片的拆分兽叮。

import可以在該文件中使用目標(biāo)文件定義的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 目標(biāo)文件中定義的 template泽本，而不會 import 目標(biāo)文件 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 文件中定義的樣式為局部樣式翠订，只作用在對應(yīng)的頁面尽超，并會覆蓋 app.wxss 中相同的選擇器官撼。

小程序支持的選擇器在官方公布的文檔中包括.class傲绣、#id巩踏、 element秃诵、element,element蛀缝、::after(注意是雙冒號)、::before這6種選擇器嗤练。 

經(jīng)過測試，小程序?qū)τ?first-child霜大、:last-child革答、.class-a .class-b{}，甚至更多層級的嵌套都是支持的残拐。 
不過官方并不推薦級聯(lián)的這種寫法，因為考慮到后面切Native的擴(kuò)展可能囊卜，會沒辦法支持級聯(lián)選擇错沃。 
所以保險起見，不建議.class-a .class-b{}這種級聯(lián)的寫法枢析，以免后期工具過濾導(dǎo)致頁面錯亂醒叁。

WXSS支持的單位有px、rem和rpx辐益，其中rem和rpx可以針對屏幕容器進(jìn)行適配，px則為固定尺寸认罩。 
其中1rpx=0.5px续捂，在WXSS和WXML中定義的rpx單位最終會轉(zhuǎn)換為在手機(jī)端可以識別的rem單位。 
![HTML5與小程序標(biāo)簽差別](http://upload-images.jianshu.io/upload_images/4357202-dac8f1707098ebb2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Tips：navigator僅支持5級頁面的跳轉(zhuǎn)劫拗； navigator不可跳轉(zhuǎn)到小程序外的鏈接地址矾克；[官方教程](https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html)
小程序的image與HTML5的img最大的區(qū)別在于：小程序的image是按照background-image來實現(xiàn)的。 默認(rèn)image的高寬是320*240。必須通過樣式定義去覆蓋這個默認(rèn)高寬滓彰，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請求服務(wù)端獲取不到參數(shù)
1.需要把Content-type改成‘a(chǎn)pplication/x-www-form-urlencoded’才可以正常獲取
2.修改Content-type后夸研，請求參數(shù)不會自動序列化，需要使用JSON.stringify轉(zhuǎn)化字符串才可以正常請求
客戶端
```
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,
        });
     },
});
```
服務(wù)器端
```
    public function answer(){
        $answer=I('post.answer');
        $answer=htmlspecialchars_decode($answer);
        $answer=json_decode($answer);
    }
```
Tips: wx.request發(fā)起的是 HTTPS 請求畦徘。HTTP請求只能在本地預(yù)覽抬闯，若要在真機(jī)預(yù)覽需要打開調(diào)試模式关筒；
[微信豆瓣小程序demo下載地址](https://github.com/wulitang/wxapp.git)