快速學會開發微信小程序

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}};"
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 標記 <div></div>
view image text map canvas form 
微信發明這種語法的緣由 微信裏面結構沒辦法更新
if 
if else
if else if else if else if.... else
<text wx:if="{{kk}}">fds</text>
刪除節點 添加節點
for wxml雜糅 
遍歷 數組
遍歷數組對象

block 空標記

 

8. 事件： 事件列表
<view bindtap="dd">fsd</view>
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 項目
文件夾爲非空的話 就按照原目錄結構導入

 

 

轉發請註明出處！