1. <dd id="erndk"></dd>
                1. 微信小程序開發系列(一) :開發環境搭建和微信小程序的視圖設計與開發

                  互聯網 2022/4/25 1:13:21

                  筆者由于工作需要,曾經參加過一個微信小程序同 SAP 系統集成的項目,因此從零開始學習了微信小程序的開發知識。這里通過系列文章把自己所學分享出來,希望對相關學習者有所幫助。 步驟1:微信小程序的申請和開發環境的搭建 本步驟主要是微信小程序的注冊和開發環境的搭建…

                  筆者由于工作需要,曾經參加過一個微信小程序同 SAP 系統集成的項目,因此從零開始學習了微信小程序的開發知識。這里通過系列文章把自己所學分享出來,希望對相關學習者有所幫助。

                  步驟1:微信小程序的申請和開發環境的搭建

                  本步驟主要是微信小程序的注冊和開發環境的搭建。

                  首先我們要在微信官方網站申請一個屬于自己的微信小程序:

                  點擊按鈕 前往注冊。注意我們需要使用一個沒有注冊過微信小程序或者微信公眾號的郵箱。我用的是網易郵箱。注冊之后,郵箱會收到一封激活郵件。

                  激活之后,就可以進入小程序主體信息登記頁面了。這里需要使用身份證號碼和手機驗證碼進行登記。

                  登記完畢之后,就可以進入微信開發者工具了。我選擇的是小程序項目:

                  在開發管理->開發設計菜單里,找到我們剛才注冊的微信小程序的 ID:抄下來,后面要用。

                  接下來,在下面這個鏈接去下載微信開發者工具:

                  大家可以把它當成是一個集成開發環境(IDE).

                  安裝完畢后啟動微信開發者工具,會要求我們指定一個本地項目目錄和填寫微信小程序的 AppID. 這個 ID 我們前一步已經抄下來了。
                  直接填進去,勾上 建立普通快速啟動模板,然后微信開發者工具會自動幫我們創建一個 Hello World 版本的微信小程序資源文件出來。

                  自動創建好的小程序如下圖所示,界面顯示就是一個簡單的 Hello World 文本。

                  我們點擊 上傳 按鈕:

                  隨便維護一個版本號,比如 1.0.0, 然后點擊 上傳。

                  然后回到小程序管理后臺,能看到我們上面通過微信開發者工具上傳的 1.0.0 版本的小程序了。我們點擊 提交審核 右邊的下拉菜單,選擇 選為體驗版本

                  會生成一個體驗版的二維碼,這時發送給你的朋友,就可以使用這個小程序了。

                  當您的朋友在手機上掃描該二維碼,會看到如下界面:該小程序標注了體驗版的提示:

                  點擊前往體驗版, 就能看到微信開發者工具自動生成的 Hello World 小程序了。

                  本文下一步驟會介紹微信小程序的視圖設計原理。

                  步驟2:微信小程序的視圖設計

                  本文以小程序的視圖設計為主,就是下圖所示 pages/index 目錄里的 index.wxml 文件。

                  我的日常工作是用一個叫做 SAP UI5 的前端框架做前端開發,剛好 SAP UI5 框架也支持創建 xml 格式的視圖(UI), 和微信小程序的 wxml非常相似。
                  做過 JSP 開發的朋友們,可以把 wxml 類比成 JSP 文件。

                  wxml 源代碼:

                  <!--index.wxml-->
                  <view class="container">
                  <view class="userinfo">
                  
                  <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 獲取頭像昵稱 </button>
                  
                  <block wx:else>
                  
                  <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
                  
                  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
                  
                  </block>
                  
                  </view>
                  
                  <view class="usermotto">
                  
                  <text class="user-motto">{{motto}}</text>
                  
                  </view>
                  
                  </view>
                  

                  下面逐一解釋每行代碼。
                  第二行:<view class="container"> 聲明了一個視圖元素,css 類型為 container. 這個container 類是微信小程序自帶的,如果刪除,小程序視圖位置會亂掉,參考我下面的測試:

                  所以需要保留。

                  第三行:<view class="userinfo"> 其中 view 元素可以嵌套,相當于原生 HTML 里的 div 元素。此處定義了另一個 view 元素,css 類為 userinfo. 這個 css 類不是微信提供的,而是我們自己開發的,位于文件 index.wxss 里:

                  第四行:

                  <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 獲取頭像昵稱 </button>
                  定義了一個按鈕,標簽為 獲取頭像昵稱。
                  這個按鈕僅當表達式 !hasUserInfo && canIUse 為 true 時才顯示。
                  button 是微信小程序框架提供的組件,組件是視圖層的基本組成單元,自帶一些功能與微信風格的樣式。注意這里的 button 標簽并不是 HTML 原生的標簽。
                  在微信開發者官網上可以查詢組件的 API.

                  下面這兩個屬性的含義:

                  • open-type="getUserInfo": 點了這個按鈕之后,會自動取當前點擊了該按鈕的微信用戶的明細數據。
                  • bindgetuserinfo="jerry_getUserInfo": 當用戶數據成功取回來之后,執行我們自己開發的回調函數 jerry_getUserInfo, 該函數定義在小程序 index/index.js 里。

                  第五行到第八行:

                  <block wx:else>
                  
                  <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
                  
                  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
                  
                  </block>
                  

                  這里定義了一個 block 區域,有兩個 UI 元素組成:image 和 text.
                  對 image 元素,bindtap="bindViewTap", 意思是一旦點擊,執行我們在 index.js 里實現的事件處理函數 bindViewTap.

                  • class="userinfo-avatar": userinfo-avatar 也是我們在 wxss 里自定義的 css 類。

                  • src="{{userInfo.avatarUrl}}": 該 image 的 src 屬性綁定到數據模型 userInfo 的字段 avatarUrl 上。數據類型 userInfo 是 index.js 里創建的,綁定到當前的視圖上。

                  而另一個文本元素 text 顯示的文本綁定到 userInfo.nickName 上。
                  我們可以直接在手機上打開微信小程序的 console 頁面,從而查看當前視圖綁定的數據模型 userInfo 的明細,其中 userInfo.nickName 包含的值如下:

                  第11行:<text class="user-motto">{{motto}}</text>
                  純文本元素,顯示的文本綁定到數據模型 motto 上。這個模型字段motto 硬編碼成 Hello World,所以我們最后在小程序上看到顯示的“Hello World".

                  本教程后續文章,我會講解微信小程序工程里的 index.js 里的代碼含義。

                  隨時隨地學軟件編程-關注百度小程序和微信小程序
                  關于找一找教程網

                  本站文章僅代表作者觀點,不代表本站立場,所有文章非營利性免費分享。
                  本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章,希望廣大程序員努力學習,讓我們用科技改變世界。
                  [微信小程序開發系列(一) :開發環境搭建和微信小程序的視圖設計與開發]http://www.yachtsalesaustralia.com/tech/detail-316864.html

                  贊(0)
                  關注微信小程序
                  程序員編程王-隨時隨地學編程

                  掃描二維碼或查找【程序員編程王】

                  可以隨時隨地學編程啦!

                  技術文章導航 更多>
                  国产在线拍揄自揄视频菠萝

                        1. <dd id="erndk"></dd>