快速學會開發微信小程式

1.手機（微信-6.5.4以上） 編輯器（微信web開發+ egret）

（editplus sublime）

（webstorm dw）

（visio eclipse zend phpstorm）

2.是什麼

即用即刪，無需安裝的程式

-宿主 微信中 （網頁–>瀏覽器）

-類似前端（html css js）

-語言 (wxml wxss js json)

-1M

微信-通訊錄-發現（小程式）-我

搜尋: 北京薪資計算器

小小房貸計算器 匯率助手

京東 攜程 去哪兒

餓了麼 美團

查地鐵 車來了 摩拜單車

。。。

3.為何

-小 1M ，app 45M

-流量大 推廣成本低

4.怎麼做

-外網 微信web開發- pages ；utils；  app.js ；app.json； app.wxss

-無外網egret

-editplus

5.1檔案組成

+ pages 微信小程式頁面

index/index.wxml=== xml檔案（html 規定好的標記集合）

view ===== div {{kk}}

text ===== span

image==== img src

index/index.wxss

所有的css的規則都可以寫

index/index.js

Page({

data:{ kk:00 }

事件列表 預設 自定義

})

index/index.json {} 其實就是外邊app.json的window鍵

+ utils 工具

app.js 專案js

window.alert()

App({}) App 內建函式

事件 全域性的值

app.json 專案json配置:配置名字、導航樣式、註冊頁面、網路、除錯

{

“pages”:[

“pages/kk/kk”,

“pages/ul/ul”

]，

“window”:{

“”:

}，

“networkTimeout”:{} ,

“tabBar”:{

“list”:[{},{}]

}

“debug”:true

}

app.wxss 全域性css檔案—-預設樣式表 每個頁面預設引入app.wxss 和 自己的.wxss 公共樣式放到app.wxss 單獨頁面樣式放入 自己的.wxss

wxss weixin stylesheet

wxml weixin markup language

幫助手冊： mp.weixin.qq.com 

5.2json 和js對比

js—–var a={name:80, /*名字*/age:20,ss:function(){}}；

json—–{

“name”:80,

“age”:20

}

5.3 如何寫靜態文字 標記中內容wxml

動態文字 {{dd}}wxml 對應的js檔案中 data裡面寫key

(插播)5.4 flex 盒子

css3 flex盒子 解決浮動問題

父親： display:flex; 讓兒子飛起來

justify-content:space-between

flex-direction:column

align-items:center

5.5 事件

bindtap==== onclick

view bindtap=”abc”

頁面.js 檔案中 新增一個Page({ abc:function(){ }})

沒有DOM 沒有window

document HTMLDivElement HTMLUlElement

event event.target 此路不通 e裡面target資料太少了

5.6小程式修改ng變數的值

this.setData({

aaa:”df”

})

5.7 如何傳遞引數

data-xx=”0″

chg:function(e){ console.dir(e);

e.target.dataset.xx

}

5.8如何修改css的值

“icon phone”

style=”color:#f00″

style=”color:{{dd}};background-color:{{kk}};”

class=”one a” one b

data:{ dd:”#f00″}

chg:function(){

this.setData({

dd:”#00f”

})

}

5.9 設定值的時候 少用this 用that

var that=this;

that.setData({})

5.10 獲取網頁裡面的值的時候

var k=ele.innerHTML

var k=this.data.key

this.setData({ })

5.11 定時器

setInterval 迴圈（瞬時 cpu兩級 20ns）

6.注意事項

補充：

除錯皮膚 console .log dir

wxml elements

7.wxml特殊語法

html 標記

view image text map canvas form

微信發明這種語法的原因 微信裡面結構沒辦法更新

if

if else

if else if else if else if…. else

fds

刪除節點 新增節點

for wxml雜糅

遍歷 陣列

遍歷陣列物件

block 空標記

8. 事件： 事件列表

fsd

bindtap 輕觸

bindlongtap 長觸

bindtouchstart e e.changedTouches e.touches

changedTouches 儲存手指資訊 變動手指

clientX clientY 視窗偏移

pageX pageY 頁面偏移

touches 螢幕上 手指數量

bindtouchmove 觸控移動

bindtouchend 觸控結束

bindtouchcancel 觸控中斷

page({

dd:function(e){ }

})

9.API

wx.XXX({

key:90,

key:34,

success:function(res){

巢狀其他的介面

},

fail:function(){}

})

10. 釋出

登入—設定–開發設定 appID

開發管理 –提交稽核 –7天左右

專案–上傳

小結：

匯入專案 egret生成的 新增專案時候 新增是一個非空目錄 那麼相當於匯入

資料夾為空的話 就新建helloWorld 專案

資料夾為非空的話 就按照原目錄結構匯入

感謝閱讀

喜歡看小編文章的點個訂閱或者喜歡！小編每天都會跟大家分享文章，也會給大家提供web前端學習資料。