中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

一小時(shí)開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序

2022-12-06    分類: 網(wǎng)站建設(shè)

云開(kāi)發(fā)請(qǐng)參考這個(gè)demo

laughing:開(kāi)發(fā)一個(gè)疫情信息申報(bào)的微信小程序

雖然不是專業(yè)做微信小程序的,但是由于無(wú)聊做一個(gè)簡(jiǎn)單的demo了解一下開(kāi)發(fā)流程還是可以的。 這次做了一個(gè)手機(jī)號(hào)碼歸屬地查詢的小程序。做出來(lái)的實(shí)物如圖:

理論上也很簡(jiǎn)單,就是找一個(gè)可查歸屬地的API進(jìn)行接口調(diào)用,做一個(gè)返回?cái)?shù)據(jù)展示而已。 只要你會(huì)JavaScript,真的是分分鐘上手,但是小程序上線還是比較繁瑣的,而且要學(xué)著用微信小程序的IDE 所謂開(kāi)發(fā)一小時(shí),上線等幾年。

關(guān)于微信小程序的技術(shù)文檔見(jiàn)官方網(wǎng)站:http://nginx.org/en/個(gè)人覺(jué)得寫得異常細(xì)致。

1、申請(qǐng)賬號(hào) 申請(qǐng)賬號(hào)的地址 https://mp.weixin.qq.com/wxopen/waregister?action=step1 微信這點(diǎn)比較坑,可能由于管理需求。個(gè)人開(kāi)發(fā)的話,雖然一個(gè)人名下可以有五個(gè)小程序,但一個(gè)郵箱只能對(duì)應(yīng)管理一個(gè)小程序。 如果你想開(kāi)發(fā)多個(gè),還得多用幾個(gè)郵箱,非常麻煩。 按流程注冊(cè)完成之后,會(huì)有一個(gè)AppID(小程序ID),這個(gè)ID很重要。在IDE創(chuàng)建項(xiàng)目和項(xiàng)目上線都是需要的。 2、安裝開(kāi)發(fā)者工具IDEhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 我這里用的是穩(wěn)定版 Stable Build。微信的IDE界面還行,但是拓展功能很差,快捷鍵支持的也不多,不是特別好用 。我大致給畫一下區(qū)域3、基本認(rèn)識(shí) 這里我們首先要認(rèn)識(shí)四種文件類型 json、js、wxml、wxss。

json和js大家都很熟悉了,微信小程序用json存儲(chǔ)數(shù)據(jù)或是寫配置信息等。js用來(lái)寫JavaScript。 令人好奇的是wxml、wxss到底是什么東西,大家都很熟悉HTML + CSS + JS的模式。實(shí)際上wxml就是html,而wxss就是寫樣式的css。 wxml也有類似vue的那種{{}}綁定數(shù)據(jù)的方法。wxss增加了一個(gè)rpx的計(jì)量單位,方便手機(jī)操作。我發(fā)現(xiàn)這套模式對(duì)有的原生html寫法 有很多不兼容的地方,還得考慮安卓和ios的兼容性問(wèn)題等。我們只是做一個(gè)demo的話、暫時(shí)不去學(xué)這些東西,就當(dāng)作HTML + CSS + JS的模式 去寫吧,遇到具體的問(wèn)題再具體解決。 微信小程序有一個(gè)主配置文件就是app.json,我們可以看出來(lái)是配置index和背景樣式之類的東西,這里我們暫時(shí)不用改這些。

4、開(kāi)發(fā) 終于講到開(kāi)發(fā)內(nèi)容了,我們看上圖的app.json,就知道index對(duì)應(yīng)的目錄為 pages/index/index,也就是打開(kāi)小程序的第一個(gè)頁(yè)面。于是我們首先來(lái)看這個(gè)html怎么寫,哦、不,wxml怎么寫,非常簡(jiǎn)單的寫一個(gè)。

wxml也是支持那種類似vue雙括號(hào){{}}綁定value的寫法,我標(biāo)的很詳細(xì)。寫好之后在js的data{}里聲明數(shù)據(jù)就輕松實(shí)現(xiàn)js對(duì)綁定value的操作了。

樣式方面可以自己在wxss里面設(shè)置,無(wú)非就是改view的class長(zhǎng)寬高,這里我主要說(shuō)一下背景圖片的樣式:

page{ height:100%; } .background { width: 100%; height: 100%; position:fixed; background-size:100% 100%; z-index: -1; }

最后就是js的寫法了,之前我們?cè)诓樵儼粹o綁定了一個(gè)事件btnclick,我們只需要聲明一個(gè)點(diǎn)擊調(diào)用API的函數(shù)即可。 查詢手機(jī)號(hào)碼歸屬的免費(fèi)API非常多,讀者可自行查閱。這里用了wx.request來(lái)發(fā)起請(qǐng)求:

btnclick:function(){ var iphone = this.data.iphones; var that = this; var key = "調(diào)用API的key,不用key可以不寫"; if(iphone != null && iphone != ''){ wx.request({ url: 'https://apis.juhe.cn/mobile/get?phone='+iphone+'&key='+key, //API的URL data: { }, header: { 'content-type': 'application/json' // 默認(rèn)值 }, success (res) { console.log(res.data); if(res.data.result == null){ that.setData({ province: "號(hào)碼不存在", city:"", company: "" }) }else{ if(res.data.result.city == res.data.result.province){ //這里是防止出現(xiàn) 北京北京聯(lián)通的情況,直轄市用法 that.setData({ province: res.data.result.province, city: "", company: res.data.result.company, }) }else{ that.setData({ province: res.data.result.province, city: res.data.result.city, company: res.data.result.company, }) } } } }) } },

有些重要的點(diǎn)說(shuō)一下,首先是這里必須要用var that = this;的定義去用this。 然后不同的接口返回的res.data的json格式肯定不同,請(qǐng)自行調(diào)整。重要的一點(diǎn)每個(gè)微信小程序需要事先設(shè)置通訊域名,小程序只可以跟指定的域名進(jìn)行網(wǎng)絡(luò)通信。也就是說(shuō),你不配的話這個(gè)接口是調(diào)用不通的 1、服務(wù)器域名請(qǐng)?jiān)?「小程序后臺(tái)-開(kāi)發(fā)-開(kāi)發(fā)設(shè)置-服務(wù)器域名」 中進(jìn)行配置,配置時(shí)需要注意: 2、域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協(xié)議; 3、域名不能使用 IP 地址(小程序的局域網(wǎng) IP 除外)或 localhost; 4、可以配置端口,如

https://myserver.com:8080,但是配置后只能向 https://myserver.com:8080發(fā)起請(qǐng)求。如果向 https://myserver.com、https://myserver.com:9091等 URL 請(qǐng)求則會(huì)失敗。 5、如果不配置端口。如 https://myserver.com,那么請(qǐng)求的 URL 中也不能包含端口,甚至是默認(rèn)的 443 端口也不可以。如果向 https://myserver.com:443請(qǐng)求則會(huì)失敗。 6、域名必須經(jīng)過(guò) ICP 備案; 7、出于安全考慮,http://api.weixin.qq.com不能被配置為服務(wù)器域名,相關(guān)API也不能在小程序內(nèi)調(diào)用。 開(kāi)發(fā)者應(yīng)將 AppSecret 保存到后臺(tái)服務(wù)器中,通過(guò)服務(wù)器使用 getAccessToken 接口獲取 access_token,并調(diào)用相關(guān) API; 8、對(duì)于每個(gè)接口,分別可以配置最多 20 個(gè)域名。

* 5、上傳代碼及版本管理 小程序?qū)懞弥筮M(jìn)行模擬器測(cè)試的同時(shí),一定要真機(jī)調(diào)試一下,看一下有沒(méi)有兼容性的問(wèn)題。IDE集成了真機(jī)調(diào)試的功能。 微信小程序的代碼有四個(gè)版本,分別是開(kāi)發(fā)版、體驗(yàn)版、審核版和線上版 當(dāng)你把開(kāi)發(fā)板上傳之后就生成了體驗(yàn)版,可用來(lái)進(jìn)行測(cè)試。測(cè)試無(wú)誤之后 即可發(fā)布審核版,在微信官方審核之后,即可上線成為線上版本。審核大約在幾天時(shí)間。

教學(xué)或需要源碼可關(guān)注微信公眾號(hào)。

本人授權(quán)維權(quán)騎士對(duì)我發(fā)布文章的版權(quán)行為進(jìn)行追究與維權(quán)。未經(jīng)本人許可,不可擅自轉(zhuǎn)載或用于其他商業(yè)用途。

網(wǎng)站標(biāo)題:一小時(shí)開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序
標(biāo)題網(wǎng)址:http://m.rwnh.cn/news27/219877.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)網(wǎng)頁(yè)設(shè)計(jì)公司網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、面包屑導(dǎo)航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
安福县| 紫云| 孝义市| 湘阴县| 汕头市| 望奎县| 河北区| 海口市| 台北县| 班玛县| 萍乡市| 五指山市| 微山县| 楚雄市| 轮台县| 漾濞| 民和| 长乐市| 开封市| 盐池县| 石首市| 昌邑市| 密云县| 阿图什市| 陇南市| 灵璧县| 平武县| 通山县| 金门县| 盘山县| 益阳市| 孟村| 新平| 合川市| 汕尾市| 定襄县| 松原市| 井研县| 朔州市| 界首市| 苏尼特右旗|