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

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 標記 <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 項目
文件夾為非空的話 就按照原目錄結構導入

?

?

轉發請注明出處！?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。