愛鋒貝

標(biāo)題: 一小時開發(fā)一個簡單的微信小程序 [打印本頁]

作者: 希慕阿巴阿巴 時間: 2023-2-26 07:29
標(biāo)題: 一小時開發(fā)一個簡單的微信小程序
定制小程序、畢設(shè)、stitp請私信。
云開發(fā)請參考這個demo

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

(, 下載次數(shù): 27)
理論上也很簡單，就是找一個可查歸屬地的API進行接口調(diào)用，做一個返回數(shù)據(jù)展示而已。只要你會JavaScript，真的是分分鐘上手，但是小程序上線還是比較繁瑣的，而且要學(xué)著用微信小程序的IDE 所謂開發(fā)一小時，上線等幾年。
關(guān)于微信小程序的技術(shù)文檔見官方網(wǎng)站：http://nginx.org/en/ 個人覺得寫得異常細致。

1、申請賬號

申請賬號的地址 https://mp.weixin.qq.com/wxopen/waregister?action=step1

微信這點比較坑，可能由于管理需求。個人開發(fā)的話，雖然一個人名下可以有五個小程序，但一個郵箱只能對應(yīng)管理一個小程序。如果你想開發(fā)多個，還得多用幾個郵箱，非常麻煩。

按流程注冊完成之后，會有一個AppID(小程序ID)，這個ID很重要。在IDE創(chuàng)建項目和項目上線都是需要的。

(, 下載次數(shù): 30)

2、安裝開發(fā)者工具IDE

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

我這里用的是穩(wěn)定版 Stable Build。微信的IDE界面還行，但是拓展功能很差，快捷鍵支持的也不多，不是特別好用。我大致給畫一下區(qū)域

(, 下載次數(shù): 26)

3、基本認識

這里我們首先要認識四種文件類型 json、js、wxml、wxss。

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

微信小程序有一個主配置文件就是app.json，我們可以看出來是配置index和背景樣式之類的東西，這里我們暫時不用改這些。

(, 下載次數(shù): 25)

4、開發(fā)

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

(, 下載次數(shù): 24)

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

(, 下載次數(shù): 23)
   樣式方面可以自己在wxss里面設(shè)置，無非就是改view的class長寬高，這里我主要說一下背景圖片的樣式：
page{
height:100%;
  }
  .background {
width: 100%;
height: 100%;
position:fixed;
background-size:100% 100%;
z-index: -1;
  } 最后就是js的寫法了，之前我們在查詢按鈕綁定了一個事件btnclick，我們只需要聲明一個點擊調(diào)用API的函數(shù)即可。查詢手機號碼歸屬的免費API非常多，讀者可自行查閱。這里用了wx.request來發(fā)起請求：
btnclick:function(){
   var iphone = this.data.iphones;
   var that = this;
   var key = &#34;調(diào)用API的key，不用key可以不寫&#34;;
   if(iphone != null && iphone != &#39;&#39;){
   wx.request({
      url: &#39;https://apis.juhe.cn/mobile/get?phone=&#39;+iphone+&#39;&key=&#39;+key, //API的URL
      data: {
      },
      header: {
         &#39;content-type&#39;: &#39;application/json&#39; // 默認值
      },
      success (res) {
         console.log(res.data);
         if(res.data.result == null){
            that.setData({
               province: &#34;號碼不存在&#34;,
               city:&#34;&#34;,
               company: &#34;&#34;
            })
         }else{
            if(res.data.result.city == res.data.result.province){ //這里是防止出現(xiàn) 北京北京聯(lián)通的情況，直轄市用法
               that.setData({
               province: res.data.result.province,
               city: &#34;&#34;,
               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格式肯定不同，請自行調(diào)整。
重要的一點每個微信小程序需要事先設(shè)置通訊域名，小程序只可以跟指定的域名進行網(wǎng)絡(luò)通信。也就是說，你不配的話這個接口是調(diào)用不通的
1、服務(wù)器域名請在「小程序后臺-開發(fā)-開發(fā)設(shè)置-服務(wù)器域名」中進行配置，配置時需要注意：
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ā)起請求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 請求則會失敗。
5、如果不配置端口。如 https://myserver.com，那么請求的 URL 中也不能包含端口，甚至是默認的 443 端口也不可以。如果向 https://myserver.com:443 請求則會失敗。
6、域名必須經(jīng)過 ICP 備案；
7、出于安全考慮，http://api.weixin.qq.com 不能被配置為服務(wù)器域名，相關(guān)API也不能在小程序內(nèi)調(diào)用。開發(fā)者應(yīng)將 AppSecret 保存到后臺服務(wù)器中，通過服務(wù)器使用 getAccessToken 接口獲取 access_token，并調(diào)用相關(guān) API；
8、對于每個接口，分別可以配置最多 20 個域名。

* 5、上傳代碼及版本管理

小程序?qū)懞弥筮M行模擬器測試的同時，一定要真機調(diào)試一下，看一下有沒有兼容性的問題。IDE集成了真機調(diào)試的功能。
微信小程序的代碼有四個版本，分別是開發(fā)版、體驗版、審核版和線上版
   當(dāng)你把開發(fā)板上傳之后就生成了體驗版，可用來進行測試。測試無誤之后即可發(fā)布審核版，在微信官方審核之后，即可上線成為線上版本。審核大約在幾天時間。

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

-----------------------------

作者: 小嘴冰涼不讓牽 時間: 2023-2-26 08:45
大佬!

作者: 靜靜心 時間: 2023-2-26 10:06
厲害

作者: 淺倉@ 時間: 2023-2-26 12:01
可以掛下源碼(去除了敏感信息)嗎？

作者: 楊天云 時間: 2023-2-26 13:39
沒啥敏感信息、可以。

作者: 你好今天的自己 時間: 2023-2-26 15:23
這...除了歸屬地api啥也沒有。10分鐘就閑多了，還一個小時

作者: 兔小丫 時間: 2023-2-26 16:54
我覺著你一分鐘就可以[贊同][贊同][贊同]

作者: 小喜子 時間: 2023-2-26 18:32
請問一下接入API可以用微信提供的云開發(fā)嗎？

作者: 蘭天 時間: 2023-2-26 20:07
兄弟我能加下你微信嗎？我想做一個小程序。

作者: 艾薇 時間: 2023-2-26 21:43
完全看不懂[大哭]

作者: 晨露 時間: 2023-2-26 22:49
一分鐘不至于，小程序我一個人負責(zé)做前后臺，做了四五個了。

作者: 木我 時間: 2023-2-26 23:50
大佬求帶，我大一剛開始，還不會做，20天能學(xué)會嗎

作者: 海洋89 時間: 2023-2-27 01:08
可以

作者: 淺笑嫣然 時間: 2023-2-27 02:19
可以

作者: 4905 時間: 2023-2-27 03:57
沒有js基礎(chǔ)能學(xué)會嗎？

作者: 雨兒 時間: 2023-2-27 05:45
不是很好做

作者: 現(xiàn)代61 時間: 2023-2-27 07:29
想要你的源代碼當(dāng)做作業(yè)交給老師可以么

作者: 純情打機 時間: 2023-2-27 08:46
[好奇][好奇]原諒我想開發(fā)個小程序但是不會代碼……[大哭][大哭]完全看不懂，
一開始我的表情[思考][思考][思考]然后我的表情[好奇][好奇][好奇][好奇][好奇][好奇]最后我的表情[噓][噓]

作者: 今天開心了嗎. 時間: 2023-2-27 10:46
[飆淚笑][飆淚笑]老師不會發(fā)現(xiàn)嗎

作者: 奮斗92 時間: 2023-2-27 12:05
大佬

作者: 貝貝333 時間: 2023-2-27 13:33
大哥，能不能教教我

歡迎光臨愛鋒貝 (http://7gfy2te7.cn/)

<video id="mui6o"></video>