免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

一小時開發一個簡單的微信小程序

2022-12-06    分類: 網站建設

云開發請參考這個demo

laughing:開發一個疫情信息申報的微信小程序

雖然不是專業做微信小程序的,但是由于無聊做一個簡單的demo了解一下開發流程還是可以的。 這次做了一個手機號碼歸屬地查詢的小程序。做出來的實物如圖:

理論上也很簡單,就是找一個可查歸屬地的API進行接口調用,做一個返回數據展示而已。 只要你會JavaScript,真的是分分鐘上手,但是小程序上線還是比較繁瑣的,而且要學著用微信小程序的IDE 所謂開發一小時,上線等幾年。

關于微信小程序的技術文檔見官方網站:http://nginx.org/en/個人覺得寫得異常細致。

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

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

4、開發 終于講到開發內容了,我們看上圖的app.json,就知道index對應的目錄為 pages/index/index,也就是打開小程序的第一個頁面。于是我們首先來看這個html怎么寫,哦、不,wxml怎么寫,非常簡單的寫一個。

wxml也是支持那種類似vue雙括號{{}}綁定value的寫法,我標的很詳細。寫好之后在js的data{}里聲明數據就輕松實現js對綁定value的操作了。

樣式方面可以自己在wxss里面設置,無非就是改view的class長寬高,這里我主要說一下背景圖片的樣式:

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

最后就是js的寫法了,之前我們在查詢按鈕綁定了一個事件btnclick,我們只需要聲明一個點擊調用API的函數即可。 查詢手機號碼歸屬的免費API非常多,讀者可自行查閱。這里用了wx.request來發起請求:

btnclick:function(){ var iphone = this.data.iphones; var that = this; var key = "調用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' // 默認值 }, success (res) { console.log(res.data); if(res.data.result == null){ that.setData({ province: "號碼不存在", city:"", company: "" }) }else{ if(res.data.result.city == res.data.result.province){ //這里是防止出現 北京北京聯通的情況,直轄市用法 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, }) } } } }) } },

有些重要的點說一下,首先是這里必須要用var that = this;的定義去用this。 然后不同的接口返回的res.data的json格式肯定不同,請自行調整。重要的一點每個微信小程序需要事先設置通訊域名,小程序只可以跟指定的域名進行網絡通信。也就是說,你不配的話這個接口是調用不通的 1、服務器域名請在 「小程序后臺-開發-開發設置-服務器域名」 中進行配置,配置時需要注意: 2、域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協議; 3、域名不能使用 IP 地址(小程序的局域網 IP 除外)或 localhost; 4、可以配置端口,如

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

* 5、上傳代碼及版本管理 小程序寫好之后進行模擬器測試的同時,一定要真機調試一下,看一下有沒有兼容性的問題。IDE集成了真機調試的功能。 微信小程序的代碼有四個版本,分別是開發版、體驗版、審核版和線上版 當你把開發板上傳之后就生成了體驗版,可用來進行測試。測試無誤之后 即可發布審核版,在微信官方審核之后,即可上線成為線上版本。審核大約在幾天時間。

教學或需要源碼可關注微信公眾號。

本人授權維權騎士對我發布文章的版權行為進行追究與維權。未經本人許可,不可擅自轉載或用于其他商業用途。

網站標題:一小時開發一個簡單的微信小程序
標題網址:http://m.newbst.com/news27/219877.html

成都網站建設公司_創新互聯,為您提供微信公眾號網頁設計公司網站維護品牌網站設計網站制作面包屑導航

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

h5響應式網站建設