準(zhǔn)備工作
1肛著、注冊(cè)一個(gè)小程序賬號(hào),得用一個(gè)沒(méi)注冊(cè)過(guò)公眾號(hào)的郵箱注冊(cè)跺讯。
2枢贿、注冊(cè)過(guò)程中需要很多認(rèn)證,有很多認(rèn)證刀脏,比較繁瑣局荚,如果暫時(shí)只是開(kāi)發(fā)測(cè)試,不進(jìn)行提審愈污、發(fā)布的話(huà)耀态,只要完成營(yíng)業(yè)執(zhí)照號(hào)填寫(xiě)就可以了,不需要完成微信認(rèn)證暂雹。
3首装、注冊(cè)完賬號(hào),登錄杭跪,在主頁(yè)面左邊列表中點(diǎn)擊設(shè)置簿盅,然后再設(shè)置頁(yè)面中選開(kāi)發(fā)設(shè)置就可以看到AppID挥下,用于登錄開(kāi)發(fā)工具。
開(kāi)發(fā)工具
在官網(wǎng)上下載 ? “微信Web開(kāi)發(fā)者工具”桨醋。
創(chuàng)建項(xiàng)目
打開(kāi)開(kāi)發(fā)者工具棚瘟,選擇小程序選項(xiàng),到達(dá)添加項(xiàng)目頁(yè)面
這個(gè)時(shí)候在前面設(shè)置頁(yè)面的AppId就用到了喜最。
如果項(xiàng)目目錄中的文件是個(gè)空文件夾偎蘸,會(huì)提示是否創(chuàng)建quick start 項(xiàng)目。
選擇“是”瞬内,開(kāi)發(fā)者工具會(huì)幫助我們?cè)陂_(kāi)發(fā)目錄里生成一個(gè)簡(jiǎn)單的 demo迷雪。
這個(gè)Demo擁有一個(gè)完整的小程序的大概框架。
1虫蝶、框架:
每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成章咧,
index.js:頁(yè)面邏輯
index.wxml:頁(yè)面結(jié)構(gòu),類(lèi)似于html
index.wxss:頁(yè)面樣式表能真,類(lèi)似于css
index.json:頁(yè)面配置
2赁严、組件
微信提供了許多組件,主要分為八種:
視圖容器粉铐、基礎(chǔ)內(nèi)容疼约、表單組件、操作反饋蝙泼、導(dǎo)航程剥、媒體組件、地圖汤踏、畫(huà)布
包含view织鲸、scroll-view、button溪胶、form等普通常用的組件搂擦,也提供了地圖map、畫(huà)布canvas载荔。
3盾饮、API
網(wǎng)絡(luò)、媒體懒熙、數(shù)據(jù)丘损、位置、設(shè)備工扎、界面徘钥、開(kāi)發(fā)接口
其中網(wǎng)絡(luò)請(qǐng)求的使用必須先到公眾平臺(tái)登錄小程序賬號(hào),在設(shè)置頁(yè)面那里肢娘,設(shè)置允許訪(fǎng)問(wèn)的域名呈础,網(wǎng)絡(luò)請(qǐng)求包含了普通的http請(qǐng)求舆驶、支持上傳、下載而钞、socket沙廉。基本上滿(mǎn)足了我們開(kāi)發(fā)中所需要的網(wǎng)絡(luò)需求臼节。
4撬陵、編譯運(yùn)行
1、模擬器
可以在模擬器上看效果网缝,上面降到了運(yùn)行底層不同巨税,效果跟在手機(jī)上運(yùn)行有些差異
2、真機(jī)
在左邊的選項(xiàng)欄中粉臊,選擇項(xiàng)目草添,然后點(diǎn)預(yù)覽會(huì)生產(chǎn)一個(gè)二維碼,用管理員微信號(hào)掃一掃就可以在真機(jī)上看實(shí)際效果
在項(xiàng)目間隙簡(jiǎn)單看了一下微信小程序扼仲,個(gè)人感覺(jué)和HBuilder的MUI框架如出一轍远寸,難點(diǎn)在于他的各種框架的使用。開(kāi)發(fā)工具有點(diǎn)原始化犀盟,可以實(shí)現(xiàn)的功能也很有限而晒,微信在后期肯定會(huì)更新完善小程序的開(kāi)發(fā)環(huán)境蝇狼。