189 7799 8166
您的當前位置: 首 頁 > 九微觀點 > 技術文檔

小程序開發測試入門教程

一.小程序應用分析

  1. 簡單介紹

小程序是一種微信開發不需要下載安裝即可使用的應用。

  1. 實質

微信小程序就是Hybrid技術的應用。 
Hybrid App(混合模式移動應用)。 
小程序能夠更多的可以更多的調用手機本身的功能(如位置信息,攝像頭等)。

  1. 小程序注冊

小程序開發框架的邏輯層是由JavaScript編寫。 邏輯層將數據進行處理后發送給視圖層,同時接受視圖層的事件反饋。小程序再次基礎上做了一些修改方便開發: 增加 App 和 Page 方法,進行程序和頁面的注冊。

App() 函數用來注冊一個小程序。接受一個 object 參數,其指定小程序的生命周期函數等。

 

 

Page() 函數用來注冊一個頁面。接受一個 object 參數,其指定頁面的初始數據、生命周期函數、事件處理函數等。生命周期函數為:

onLoad: 頁面加載

一個頁面只會調用一次。

onShow: 頁面顯示

每次打開頁面都會調用一次。

onReady: 頁面初次渲染完成

一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互

onHide: 頁面隱藏

navigateTo或底部tab切換時調用

onUnload: 頁面卸載

redirectTo或navigateBack的時候調用

 

二.小程序實例解析

  1. 創建項目

現在是內測版本,所有的AppID全部都是騰訊內部發布的。但是,沒有AppID也不影響測試開發,我們可以選擇無AppID進行測試開發,只是不能在手機真機上面調試。

 

選擇項目目錄,再添加項目即可。

2. 編寫代碼

點擊開發者工具左側導航的「編輯」,我們可以看到這個項目,已經初始化并包含了一些簡單的代碼文件。是 app.js、app.json、app.wxss 這三個。其中app.js是我們傳統的js文件,app.json是項目配置文件,app.wxss是項目css文件,微信小程序會讀取這些文件,并生成小程序實例。

(1)app.json:

app.json 是對整個小程序的全局配置。其中有5個屬性,官方給出的配置表為:

 

 

我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口  背景色,配置導航條樣式,配置默認標題。注意該文件不可添加任何注釋。

window是用于設置小程序的狀態欄、導航條、標題、窗口背景色。

 

 

 

pages里面是程序的所有頁面的目錄,所有需要跳轉的頁面,都需要在pages里面配置好。

(2)tabBar:

tabBar是底部導航欄部分,tabBar API為

 

 

tabBar配置好后,在任何頁面下,都會有一個tab導航欄,其中list里面是配置tab里有多少個按鈕,案例中為兩個。list里面有多個屬性,

 

 

案例APP的app.json為:

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "green",

    "navigationBarTitleText": "APP",

    "navigationBarTextStyle":"white"

  },

   "tabBar": {

     "selectedColor":"red",

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首頁",

      "iconPath":"goods_mgold.png",

      "selectedIconPath":"goods_mgold.png"

    }, {

      "pagePath": "pages/logs/logs",

      "text": "天氣查詢",

      "iconPath":"icon_community.png",

      "selectedIconPath":"icon_community.png"

    }]

  }

}

上面那段配置代碼展示出來的效果是: 

 

 

(3)wxml文件:

微信的wxml文件相當于傳統的html文件,省去了一些微信APP開發不需要的標簽,如H1-H5,用了這些就會報錯,其中html中的div標簽,在微信中變成了view標簽。(也就是換了個名字。。。)

(4)app.js:

app.js是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用 MINA 提供的豐富的 API。代碼主要是寫在APP對象里面作用于全局。

其中每個頁面都可以有自己的js文件,例如index.js就是Index.wxml頁面的js代碼,其中js代碼的一些應用主要是寫在page對象里面。

事件的使用方式:

首先在wxml里面寫入一個bindtap點擊事件。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

然后再js的page對象中定義:

 

 

就可以實現一個點擊事件。其中bind是綁定,type為tap。type是事件類型。

數據渲染:

在組件上使用wx:for控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為index,數組當前項的變量名默認為item

xwml里面寫入:

 

 

index.js里面寫入:

 

 

條件渲染:

wx:if來判斷是否在頁面是進行渲染顯示

 

 

可以在Page對象里面的data屬性里面寫入condition的值為true或者false判斷是否渲染。

模板定義:

可以在模板中定義代碼片段,然后在不同的地方調用。

直接在外部新建一個box.wxml的模板:

 

 

然后建立一個外部commom.js模塊。

 

 

通過module.exports導出模塊,

先在需要引入模塊的wxml文件中直接include 帶上src地址

 

 

然后在需要引入模塊的js文件中:

 

 

然后用common.show()調用。

這樣就可以復用這個模塊了。在任何頁面中只需要用include導入wxml代碼,用require引入js文件就可以添加這個模塊。

 

 

(5)wxss:

wxss文件就是傳統的css文件,沒有很大的區別。

但是其中微信給一套響應式的布局

rpx(responsive pixel): 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

rpx的原理就是rem布局原理。只是換個名字,少了一步屏幕fon-size換算的Js代碼,微信在內部執行了,不需要自己寫了。

(6)接口API:

小程序開發框架提供豐富的微信原生 API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。

API文檔地址

https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-network.html?t=1477656494973

(原文鏈接:https://www.cnblogs.com/lkhome/articles/6144451.html

[field:typename /]

 

 

?

廣西九微文化傳媒有限公司 Copyright© 20010-2019 桂ICP備15001971號

国内偷拍高清精品免费视频,巨大胸大乳美女在线播放,超级黄肉动漫在线观看,一区二区三区不卡高 清
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>