From: https://www.cnblogs.com/juaner-hlj/p/6628148.html

1.手機(jī)（微信-6.5.4以上） 編輯器（微信web開發(fā)+ egret）
（editplus sublime）
（webstorm dw）
（visio eclipse zend phpstorm）

2.是什么
即用即刪，無需安裝的程序
-宿主 微信中 （網(wǎng)頁-->瀏覽器）
-類似前端（html css js）
-語言 (wxml wxss js json)
-1M
微信-通訊錄-發(fā)現(xiàn)（小程序）-我
搜索: 北京薪資計(jì)算器
小小房貸計(jì)算器 匯率助手
京東 攜程 去哪兒
餓了么 美團(tuán)
查地鐵 車來了 摩拜單車
。。。
3.為何
-小 1M ，app 45M
-流量大 推廣成本低
4.怎么做
-外網(wǎng) 微信web開發(fā)- pages ；utils； ?app.js ；app.json； app.wxss
-無外網(wǎng)egret
-editplus

5.1文件組成
+ pages 微信小程序頁面
index/index.wxml=== xml文件（html 規(guī)定好的標(biāo)記集合）
view ===== div {{kk}}
text ===== span
image==== img src
index/index.wxss
所有的css的規(guī)則都可以寫

index/index.js
Page({
data:{ kk:00 }
事件列表 默認(rèn) 自定義
})
index/index.json {} 其實(shí)就是外邊app.json的window鍵

+ utils 工具
app.js 項(xiàng)目js
window.alert()
App({}) App 內(nèi)置函數(shù)
事件 全局的值
app.json 項(xiàng)目json配置:配置名字、導(dǎo)航樣式、注冊頁面、網(wǎng)絡(luò)、調(diào)試
{
"pages":[
"pages/kk/kk",
"pages/ul/ul"
]，
"window":{
"":
}，
"networkTimeout":{} ,
"tabBar":{
"list":[{},{}]
}
"debug":true
}
app.wxss 全局css文件----默認(rèn)樣式表 每個(gè)頁面默認(rèn)引入app.wxss 和 自己的.wxss 公共樣式放到app.wxss 單獨(dú)頁面樣式放入 自己的.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 如何寫靜態(tài)文本 標(biāo)記中內(nèi)容wxml
動(dòng)態(tài)文本 {{dd}}wxml 對應(yīng)的js文件中 data里面寫key

(插播)5.4 flex 盒子
css3 flex盒子 解決浮動(dòng)問題
父親： display:flex; 讓兒子飛起來
justify-content:space-between
flex-direction:column
align-items:center

5.5 事件
bindtap==== onclick
view bindtap="abc"
頁面.js 文件中 添加一個(gè)Page({ abc:function(){ }})
沒有DOM 沒有window
document HTMLDivElement HTMLUlElement
event event.target 此路不通 e里面target數(shù)據(jù)太少了

5.6小程序修改ng變量的值
this.setData({
aaa:"df"
})

5.7 如何傳遞參數(shù)
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 設(shè)置值的時(shí)候 少用this 用that
var that=this;
that.setData({})

5.10 獲取網(wǎng)頁里面的值的時(shí)候
var k=ele.innerHTML
var k=this.data.key
this.setData({ })
?

5.11 定時(shí)器
setInterval 循環(huán)（瞬時(shí) cpu兩級(jí) 20ns）

6.注意事項(xiàng)

補(bǔ)充：
調(diào)試面板 console .log dir
wxml elements

?

?

7.wxml特殊語法
html 標(biāo)記 <div></div>
view image text map canvas form
微信發(fā)明這種語法的原因 微信里面結(jié)構(gòu)沒辦法更新
if
if else
if else if else if else if.... else
<text wx:if="{{kk}}">fds</text>
刪除節(jié)點(diǎn) 添加節(jié)點(diǎn)
for wxml雜糅
遍歷 數(shù)組
遍歷數(shù)組對象

block 空標(biāo)記

?

8. 事件： 事件列表
<view bindtap="dd">fsd</view>
bindtap 輕觸
bindlongtap 長觸
bindtouchstart e e.changedTouches e.touches
changedTouches 存儲(chǔ)手指信息 變動(dòng)手指
clientX clientY 視窗偏移
pageX pageY 頁面偏移

touches 屏幕上 手指數(shù)量
bindtouchmove 觸摸移動(dòng)
bindtouchend 觸摸結(jié)束
bindtouchcancel 觸摸中斷
page({
dd:function(e){ }
})

?

9.API
wx.XXX({
key:90,
key:34,
success:function(res){
嵌套其他的接口
},
fail:function(){}

})

10. 發(fā)布
登錄---設(shè)置--開發(fā)設(shè)置 appID
開發(fā)管理 --提交審核 --7天左右
項(xiàng)目--上傳

小結(jié)：
導(dǎo)入項(xiàng)目 egret生成的 添加項(xiàng)目時(shí)候 添加是一個(gè)非空目錄 那么相當(dāng)于導(dǎo)入
文件夾為空的話 就新建helloWorld 項(xiàng)目
文件夾為非空的話 就按照原目錄結(jié)構(gòu)導(dǎo)入

?

?

轉(zhuǎn)發(fā)請注明出處！?

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的快速学会开发微信小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。