超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

快速開發(fā)一個自己的微信小程序

2018-7-20    seo達人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

一.寫在前面

小程序?qū)W習(xí)資料

1.為什么要學(xué)小程序開發(fā)?

對于前端開發(fā)而言,微信小程序因為其簡單快速、開發(fā)成本低、用戶流量巨大等特點,也就成了前端開發(fā)工程師必會的一個技能。

2.開發(fā)準備:

(1)有人開玩笑說,會vue小程序根本都不用學(xué):

微信小程序雖然是騰訊自己搞的,但是核心的思想跟vue等框架是一樣一樣的哦~

(2)善于搜集精美的小組件: “我們不生產(chǎn)代碼,我們只是代碼的搬運工”,善于找到想要的組件并把他們巧妙優(yōu)雅的組裝成一個大項目,也算是程序員一項基本技能了。

具體怎么找到想要的小程序demo,篇末會給大家推薦小程序的資源,有很多大神的項目哦

擼起袖子開干了

一.注冊小程序賬號,下載IDE

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

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

注意:

(1)注冊賬號之后會有一個appid,新建項目的時候需要填上,不然很多功能是用不了的,比如不能預(yù)覽,不能上傳代碼等等。

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

二.小程序框架介紹和運行機制

1.我們建立了“普通快速啟動模板”,然后整個項目目錄如下:

2.app.js

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

globalData是定義整個項目的全局變量或者常量哦。

3.app.json

整個項目的配置文件,比如注冊頁面,配置tab頁,設(shè)置整個項目的樣式,頁面標題等等;

!注意:小程序啟動默認的第一個頁面,就是app.json的pages中的第一個頁面哦。

4.pages

小程序的頁面組件,有幾個頁面就會有幾個子文件夾。比如快速啟動模板,就有兩個頁面,index和logs

5.打開index目錄

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

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

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

index.js就是js文件哦。

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

6.雙擊index.js文件

(1)var app = getApp();

引入整個項目的app.js文件,用來取期中的公共變量等信息。

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

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

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

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

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

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

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

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

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

7 .wxml模板的使用。

比如本項目電影頁面,就是以最小的星級評價組件wxml當做模板,star到movie到movie-list,一級一級的嵌套使用。

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

8.常用的wxml標簽

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

三.小程序框架、各個頁面以及發(fā)布上線的注意點

1.整個框架中的一些注意點

(1)整個wxml頁面,最底層的標簽是哦。

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

(3)json中不能寫注釋哦,不然會報錯的。

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

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

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

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

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

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

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

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

比如wxml中我們怎么寫

點擊的事件對象可以這么取,var postId = event.currentTarget.dataset.postid;

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

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

target指的是當前點擊的組件 和currentTarget 指的是事件捕獲的組件。

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

這時target這里指的是image(因為點擊的是圖片),而currentTarget指的是swiper(因為綁定點擊事件在swiper上)

(8)使用免費的網(wǎng)絡(luò)接口:

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

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

附上一個免費接口大全:

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

!!另外還要注意,要把這些接口的域名配置到小程序的合法域名中,不然也是訪問不了的

(8)wxss有一個坑:無法讀取本地資源,比如背景圖片用本地就會報錯哦。

把本地圖片弄成網(wǎng)絡(luò)圖片的幾種方式: 上傳到個人網(wǎng)站;QQ空間相冊等等也是可以的哦

2.切換城市頁面:

(1)首頁使用navigateTo跳轉(zhuǎn)到切換城市頁,由于首頁并沒有關(guān)閉,導(dǎo)致切換了城市返回來,天氣信息還是舊的。

正確的處理邏輯如下:

1)使用reLaunch跳轉(zhuǎn)到切換城市頁面,實質(zhì)是關(guān)閉所有頁面打開新的頁面哦。

2)切換城市頁面,更新公共變量中城市信息為手動切換的城區(qū),再switchTab回到首頁,觸發(fā)首頁重新加載。

3)首頁獲取城市信息的時候加一個判斷,全局沒有才取定位的,全局有(比如剛才設(shè)置了)就用全局的哦。

(2)城市列表的滾動和回到頂部

基于scroll-view組件的scroll-top屬性,初始就是0,滾動就會增加的;點擊回到頂部給它置為0即可回到頂部

3.天氣頁

(1)初始化頁面,天氣顯示的邏輯

首先調(diào)用小程序的wx.getLocation方法獲得當前的經(jīng)緯度,然后調(diào)用騰訊地圖獲得當前的城市名稱和區(qū)縣名稱,并存到公共變量中,

再調(diào)用查詢天氣和空氣質(zhì)量的方法哦。

(2)容錯處理

城市的名稱長短不一,有點名字特別長,比如巴彥淖爾市這種,需要動態(tài)的獲取完整的城市名稱;

有些偏僻的城市暫時沒有天氣信息,我們需要對返回的結(jié)果進行判斷,沒有信息的需要給用戶一個良好的提示信息。

4.周邊-地圖服務(wù)頁面

(1)調(diào)用百度地圖的各種服務(wù),查詢酒店,美食,生活服務(wù)三種信息,更多信息可以看百度地圖的文檔

(2)點擊時給被點中的圖標加個邊框,數(shù)據(jù)驅(qū)動視圖,所以使用一個長度為3的數(shù)組保存三個圖標當前是否被點中的狀態(tài)

然后wxml再根據(jù)數(shù)據(jù)來動態(tài)添加class,增加邊框樣式

5.豆瓣電影頁

(1)電影詳情頁的預(yù)覽圖片,用小程序本身的previewImage實現(xiàn)。

(2)詳情頁使用onReachBottom()方法,監(jiān)控用戶上拉觸底事件,然后發(fā)送請求繼續(xù)獲得數(shù)據(jù),實現(xiàn)懶加載的效果

(3)用戶體驗方面的優(yōu)化,js中將整數(shù)評分比如7分統(tǒng)一改為7.0分,然后wxml模板再判斷分數(shù)是否為0顯示“暫無評分”

(4)搜索之后清空搜索框

因為小程序中不能使用getelementbyId這種方式獲得元素,只能用數(shù)據(jù)來控制了

在data中加一個屬性searchText來保存搜索框的內(nèi)容并和 input的value屬性綁定,搜索完成或者點擊X時,searchText變量清空即可實現(xiàn)清空輸入框的效果哦。

6.新聞頁面

(1)聚合頭條新聞的免費接口,只返回了新聞的基本信息,新聞的主體內(nèi)容是沒有的哦。

我找了好多新聞類的接口,好像都是沒有新聞主體內(nèi)容的。如果誰知道更好的接口歡迎留言告訴我哈~

(2)當然,也可以自己去爬新聞網(wǎng)站的數(shù)據(jù)哦

7.更多頁面

(1)小程序目前開放外鏈的功能只是給公司組織的小程序開放了,個人開發(fā)還是不能使用外鏈的哦。

(2)彩蛋頁面,獲得用戶信息

通過 wx.setStorageSync('userInfos', userInfos); 可以獲得登陸小程序的用戶的個人信息,可以發(fā)送給后臺存到數(shù)據(jù)庫中,方便對用戶進行分析

我這里只是存儲到瀏覽器緩存中哦,最大應(yīng)該是10M緩存;如果用戶把這個小程序從小程序列表中刪除掉,就會清空這個緩存。

8.發(fā)布注意

(1) 新版本小程序發(fā)布的限制為2M,一般都是圖片最占空間,所以盡量使用網(wǎng)絡(luò)圖片

具體怎么把本地圖片變成網(wǎng)絡(luò)圖片,上面有講哦。

(2)在開發(fā)者工具上預(yù)覽測試沒問題,點擊上傳;網(wǎng)頁版小程序個的人中心的左側(cè)“開發(fā)管理”菜單,第三塊--開發(fā)版本就有了內(nèi)容。

(3)點擊提交,填寫小程序相關(guān)信息,就可以提交審核了哦。

注意:分類最好填寫準確,這樣才能更快的通過審核哦。我這個小程序一天半時間過審上線的

至此,我就把兩天開發(fā)內(nèi)碰到的坑和注意點都過了一遍,據(jù)說還有更多的坑,等之后更深入的開發(fā)再繼續(xù)研究咯。

藍藍設(shè)計m.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.miumiuwan.com

存檔