快速学会开发微信小程序
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql Connector C/C+
- 下一篇: java微信测单删,免费查微信单删软件有