亚洲色图综合,国产成人久久久精品二区三区蜜臀,日韩久久中文,久久人人爽人人爽av片

首頁>電商資訊>微信小程序開發(fā)教程
熱點(diǎn)新聞

微信小程序開發(fā)教程

作者:TPshop搜豹商城   發(fā)布時(shí)間:2019-12-06 15:03   閱讀:1436

微信小程序開發(fā)教程,需要的小伙伴們記得看完收藏哦!


注冊(cè)小程序賬號(hào),下載IDE

官網(wǎng)注冊(cè)https://mp.weixin.qq.com/,并下載IDE。

官方文檔一向都是最好的學(xué)習(xí)資料。


注意:

(1)注冊(cè)賬號(hào)之后會(huì)有一個(gè)appid,新建項(xiàng)目的時(shí)候需要填上,不然很多功能是用不了的,比如不能預(yù)覽,不能上傳代碼等等。

(2)如果你注冊(cè)過微信公眾號(hào)的話,一定要注意,微信公眾號(hào)和小程序是兩個(gè)賬號(hào),二者的appid也是不同,小程序開發(fā)必須使用小程序的appid。


小程序框架介紹和運(yùn)行機(jī)制

1、我們建立了“普通快速啟動(dòng)模板”,然后整個(gè)項(xiàng)目目錄如下:

微信小程序開發(fā)教程

微信小程序怎么開發(fā)?快速開發(fā)一個(gè)小程序教程


2、app.js

整個(gè)項(xiàng)目的啟動(dòng)文件,如注釋寫的onlaunch方法有三大功能,瀏覽器緩存進(jìn)行存和取數(shù)據(jù);用登陸成功的回調(diào);獲取用戶信息。

globalData是定義整個(gè)項(xiàng)目的全局變量或者常量。


3、app.json

整個(gè)項(xiàng)目的配置文件,比如注冊(cè)頁面,配置tab頁,設(shè)置整個(gè)項(xiàng)目的樣式,頁面標(biāo)題等等;

注意:小程序啟動(dòng)默認(rèn)的第一個(gè)頁面,就是app.json的pages中的第一個(gè)頁面。


4、pages

小程序的頁面組件,有幾個(gè)頁面就會(huì)有幾個(gè)子文件夾。比如快速啟動(dòng)模板,就有兩個(gè)頁面,index和logs


5、打開index目錄

可以看到有三個(gè)文件,其實(shí)和我們web開發(fā)的文件是一一對(duì)應(yīng)的。

index.wxml對(duì)應(yīng)index.html;

index.wxss對(duì)應(yīng)index.css;

index.js就是js文件。

一般我們還會(huì)給每個(gè)頁面組件添加一個(gè).json文件,作為該頁面組件的配置文件,設(shè)置頁面標(biāo)題等功能


6、雙擊index.js文件

(1)var app = getApp();

引入整個(gè)項(xiàng)目的app.js文件,用來取期中的公共變量等信息。

如果要使用util.js工具庫中的某個(gè)方法,在util.js中module.exports導(dǎo)出,然后在需要的頁面中require即可得到。


(2)比如,我們要獲取豆瓣電影的時(shí)候,我們需要調(diào)用豆瓣的api;我們先在app.js中的gloabData中定義doubanBase

然后在index.js中使用app.globaData.doubanBase即可取到這個(gè)值。

當(dāng)然這些常量你也可以在頁面需要的時(shí)候,再用寫死的值,但是為了整個(gè)項(xiàng)目的維護(hù),還是建議把這種公用參數(shù)統(tǒng)一寫在配置文件中。


(3)接下來在整個(gè)page({})中,第一個(gè)data,就是本頁面組件的內(nèi)部數(shù)據(jù),會(huì)渲染到該頁面的wxml文件中,類似于vue、react~

通過setData修改data數(shù)據(jù),驅(qū)動(dòng)頁面渲染


(4)一些生命周期函數(shù)

比如onload(), onready(), onshow(), onhide()等等,監(jiān)聽頁面加載、頁面初次渲染、頁面顯示、頁面隱藏等等

更多的可以查官網(wǎng)API。其中用的最多的就是onload()方法,和onShareAppMessage()方法(設(shè)置頁面分享的信息)

微信小程序開發(fā)教程

7、wxml模板的使用。

比如本項(xiàng)目電影頁面,就是以最小的星級(jí)評(píng)價(jià)組件wxml當(dāng)做模板,star到movie到movie-list,一級(jí)一級(jí)的嵌套使用。

star-template.wxml頁面寫好name屬性;然后import引入的時(shí)候通過name獲得即可


8、常用的wxml標(biāo)簽

view,text,icon,swiper,block,scroll-view等等,這些標(biāo)簽直接查官網(wǎng)文檔即可


小程序框架、各個(gè)頁面以及發(fā)布上線的注意點(diǎn)

1、整個(gè)框架中的一些注意點(diǎn)

(1)整個(gè)wxml頁面,最底層的標(biāo)簽是。

(2) 每個(gè)頁面頂部導(dǎo)航欄的顏色,title在本頁面的json中配置,如果沒有配置的話,取app.json中的總配置。

(3)json中不能寫注釋,不然會(huì)報(bào)錯(cuò)的。

(4)路由相關(guān)

1)使用wx.SwitchTab跳轉(zhuǎn)tab頁的話,在app.json中除了注冊(cè)pages頁面,還需要在tabBar中注冊(cè)tab頁,才能生效。

注意:tab最多5個(gè),也就是我們說的頭部或者底部最多5個(gè)菜單。其他的頁面只能通過其他路由方法打開。

2)navigateTo是跳到某個(gè)非tab頁,比如歡迎頁,電影詳情頁,城市選擇頁;在app.json中注冊(cè)后,不能在tabBar里注冊(cè),不然同樣也是不能跳轉(zhuǎn)的。

3)reLaunch跳轉(zhuǎn),新開的頁面左上角是沒有退回按鈕的,本項(xiàng)目只用了一次,切換城市的時(shí)候。

4)頁面之間傳遞參數(shù)

參數(shù)寫在跳轉(zhuǎn)的url之中,然后另一個(gè)頁面在onload方法中的傳參option接收到。如下傳遞和獲取id


(5)data-開頭的自定義屬性的使用

比如wxml中我們?cè)趺磳扅c(diǎn)擊的事件對(duì)象可以這么取,var postId = event.currentTarget.dataset.postid;

注意: 大寫會(huì)轉(zhuǎn)換成小寫,帶_符號(hào)會(huì)轉(zhuǎn)成駝峰形式


(6)事件對(duì)象event,event.target和event.currentTarget的區(qū)別:

target指的是當(dāng)前點(diǎn)擊的組件 和currentTarget 指的是事件捕獲的組件。

比如,輪播圖組件,點(diǎn)擊事件應(yīng)該要綁定到swiper上,這樣才能監(jiān)控任意一張圖片是否被點(diǎn)擊,

這時(shí)target這里指的是image(因?yàn)辄c(diǎn)擊的是圖片),而currentTarget指的是swiper(因?yàn)榻壎c(diǎn)擊事件在swiper上)


(7)使用免費(fèi)的網(wǎng)絡(luò)接口:

本項(xiàng)目中用到了 和風(fēng)天氣api,騰訊地圖api,百度地圖api,豆瓣電影api,聚合頭條新聞api等,具體用法可以看各自官網(wǎng)的接口文檔,很詳細(xì)的

注意:免費(fèi)接口是有訪問限制的,所以如果用別人的組件用了這種接口的話,最好還是自己注冊(cè)一個(gè)新的key替換上

附上一個(gè)免費(fèi)接口大全:

https://github.com/jokermonn/-Api


TPshop()是國內(nèi)知名商城系統(tǒng)及商城網(wǎng)站建設(shè)開發(fā)商,為企業(yè)級(jí)商家提供新零售O2O系統(tǒng)商城、微信分銷商城、網(wǎng)上商城開發(fā)、電商小程序、開源網(wǎng)店商城、社區(qū)團(tuán)購系統(tǒng)等多端商城及電子商務(wù)行業(yè)解決方案>


文章來源:hishop



上一篇:微信小程序開發(fā)公司哪家好,如何選擇開發(fā)公司? 下一篇:微信小程序如何開發(fā),需要多少錢?
All Rights Reserved 深圳搜豹網(wǎng)絡(luò)有限公司版權(quán)所有.粵ICP備15065422號(hào) 深圳市龍崗區(qū)坂田街道楊美社區(qū)六維商務(wù)中心C座三層C312
tel code back_top