• <thead id="ximmw"><span id="ximmw"></span></thead>

    <u id="ximmw"></u>
  • <wbr id="ximmw"><ins id="ximmw"><progress id="ximmw"></progress></ins></wbr><wbr id="ximmw"><object id="ximmw"><option id="ximmw"></option></object></wbr><wbr id="ximmw"><ins id="ximmw"><table id="ximmw"></table></ins></wbr>
    1. LOGO
      | 做生意,沒那么難
      導(dǎo)航

      微信小程序的開發(fā)流程

      小程序開發(fā)

      微信小程序,簡稱小程序,其英文名為Mini Program。如今,幾乎每臺智能手機(jī)上都會安裝微信應(yīng)用程序,微信的用戶也遍布全球。而微信小程序?qū)崿F(xiàn)了在微信內(nèi)部不需要下載安裝,用戶掃一掃或搜索一下即可打開應(yīng)用程序。



      1 界面與操作

      微信小程序開發(fā)工具的功能非常強(qiáng)大和便捷,其工具內(nèi)部集成了代碼編輯、開發(fā)調(diào)試及程序發(fā)布等功能,

      2 編輯功能

      編輯區(qū)分為兩個部分,在右側(cè)的編輯區(qū)域可以對當(dāng)前項(xiàng)目進(jìn)行編寫、文件添加和刪除以及重命名等基本操作。在左側(cè)的模擬器區(qū)域可以實(shí)時預(yù)覽編輯的情況。編輯器同時也提供了比較完善的自動補(bǔ)全和自動保存功能,編寫代碼后,工具會自動幫助用戶保存當(dāng)前代碼為編輯狀態(tài),如果直接關(guān)閉工具或者切換項(xiàng)目,也不會丟失當(dāng)前代碼的編輯狀態(tài)。

      但是要注意,處于編輯狀態(tài)的代碼只保存到工具內(nèi)部,并沒有寫到硬盤上,

      只有手動保存文件后,修改的內(nèi)容才會寫到硬盤上,并觸發(fā)實(shí)時預(yù)覽。

      3 調(diào)試功能

      調(diào)試工具分為七大功能模塊:Console、Sources、Network、Storage、AppData、Wxml和Sensor,

      4 項(xiàng)目功能

      編輯器項(xiàng)目選項(xiàng)卡主要用于顯示和設(shè)置項(xiàng)目的信息,其中顯示的信息包括圖標(biāo)、AppID、本地開發(fā)目錄、最新更新時間、最近上傳時間以及代碼包大小。·

      預(yù)覽:指上傳源碼到微信服務(wù)器并成功后會生成一個二維碼,開發(fā)者用最新版本的微信掃描二維碼后,即可在手機(jī)上體驗(yàn)到最新的效果。

      5 項(xiàng)目的目錄與文件結(jié)構(gòu)

      在創(chuàng)建小程序項(xiàng)目時,小程序開發(fā)工具會默認(rèn)生成一些文件,這些文件就是小程序的基本結(jié)構(gòu)。除此之外,在開發(fā)過程中,可以根據(jù)產(chǎn)品需求自定義小程序的目錄和文件。

      微信小程序開發(fā)基礎(chǔ)

      全局配置

      微信小程序的全局配置都要在app.json文件中進(jìn)行。

      這些配置可以決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多tab等。

      pages配置項(xiàng)

      pages接受一個數(shù)組值,每一項(xiàng)都是字符串,用來指定小程序由哪些頁面組成。

      每一項(xiàng)代表對應(yīng)頁面的[路徑+文件名]信息。

      window配置項(xiàng)

      window接受對象值,用來設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、窗口頁面等對象的基本樣式屬性。

      tabBar配置項(xiàng)

      tabBar接受一個數(shù)組值,用來設(shè)置tab底部標(biāo)簽欄的樣式表現(xiàn),以及tab切換時顯示的對應(yīng)頁面。

      networkTimeout配置項(xiàng)

      networkTimeout接受對象值,用來設(shè)置各種網(wǎng)絡(luò)請求對象超時時間。超時時間單位為毫秒,默認(rèn)為60000。

      debug配置項(xiàng)

      debug接收一個Boolean值,用于設(shè)置開啟開發(fā)者工具的調(diào)試模式。默認(rèn)是false,開啟后,在開發(fā)者工具的控制臺面板中,調(diào)試信息以info的形式給出,其信息有Page的注冊、頁面路由、數(shù)據(jù)更新、事件觸發(fā)。這樣可以幫助開發(fā)者快速定位一些常見的問題,但是,在正式發(fā)布時,應(yīng)當(dāng)關(guān)閉此配置項(xiàng)。

      頁面配置

      微信小程序除了app.json全局配置,還可以對每一個頁面的.json進(jìn)行單獨(dú)配置。每個頁面的配置比app.json全局配置簡單得多,只是設(shè)置app.json中的window配置項(xiàng)的內(nèi)容,頁面中配置項(xiàng)會覆蓋app.json的window中相同的配置項(xiàng)。頁面的.json只能設(shè)置window相關(guān)的配置項(xiàng),以決定本頁面的窗口表現(xiàn),所以無須寫window這個鍵。

      頁面的生命周期

      每個微信小程序應(yīng)用都有自己的生命周期,而微信小程序應(yīng)用的每個頁面也有自己的生命周期,

      頁面的數(shù)據(jù)處理

      頁面的數(shù)據(jù)處理分兩個方面,首先是初始化數(shù)據(jù),其次是對數(shù)據(jù)進(jìn)行操作。

      數(shù)據(jù)的初始化

      初始化數(shù)據(jù)將作為頁面的第一次渲染。data會以JSON的形式由邏輯層傳至視圖層(也就是從.js文件傳入到.wxml文件中,視圖層可以通過WXML對數(shù)據(jù)進(jìn)行綁定),所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式的字符串、數(shù)字、布爾值、對象、數(shù)組。

      頁面的棧

      微信小程序提供的框架是以棧的形式維護(hù)所有頁面。

      注意:

      · 不要嘗試修改頁面棧,會導(dǎo)致路由以及頁面狀態(tài)錯誤。

      頁面的路由

      在微信小程序中,所有頁面的路由全部由框架進(jìn)行管理。

      簡單封裝與調(diào)用

      文件作用域

      在.js文件中聲明的變量和函數(shù)只在該文件中有效;在不同的文件中可以聲明相同名字的變量和函數(shù),

      不會互相影響。

      通過全局函數(shù)getApp()可以獲取全局的應(yīng)用實(shí)例,如果需要全局的數(shù)據(jù),

      則可以在App()中設(shè)置。

      模塊化

      在日常編程過程中,一般都會把一些可以復(fù)用的代碼提煉出來,放到一個公共文件中。在微信小程序中,可以將一些公共的代碼抽離成為一個單獨(dú)的JS文件,作為一個模塊。模塊只有通過module.exports或者exports才能對外暴露接口。

      Flexbox布局

      微信小程序通過Flexbox模型布局對組件進(jìn)行排列。相比普通的布局方式,F(xiàn)lexbox更容易實(shí)現(xiàn)寬高適合屏幕的布局,使用起來更靈活,非常適合于微信小程序的布局要求。

      1 基本要素

      Flexbox布局的主要思想為通過設(shè)定容器(flex container即伸縮容器)與子元素(flex item即伸縮項(xiàng)目)的規(guī)則,使所有view組件在主軸(main axis)與側(cè)軸(cross axis)上合理地自動分配

      2 容器屬性

      容器屬性指的是包裹子元素的容器(flex container)屬性

      3 子元素屬性

      子元素屬性定義了伸縮項(xiàng)目的屬性,

      4 position屬性

      position屬性用于指定一個元素在文檔中的定位方式

      5 邊框、空隙與填充

      邊框很好理解,空隙指的是組件之間的距離,而填充指的是組件的內(nèi)容到其邊框的距離,

      組件的開發(fā)應(yīng)用

      組件是視圖層的基本元素,是構(gòu)建頁面的基礎(chǔ)。

      每個組件都有自定義的屬性,可以對功能樣式進(jìn)行修改,但只支持以下七種數(shù)據(jù)類型

      :1 視圖容器組件

      微信小程序具有豐富的用戶界面組件,借助這些組件,開發(fā)者可以很方便地搭建用戶界面。

      2 基礎(chǔ)內(nèi)容組件

      基礎(chǔ)內(nèi)容組件用于在界面中展示圖標(biāo)、文字、滾動條信息等。

      3 表單組件

      表單組件用于構(gòu)建與用戶交互的表單。

      4 多媒體組件

      多媒體組件可以在頁面中加載圖片、音頻、視頻,并且能夠控制顯示方式和進(jìn)程,使頁面更加多元化,更具吸引力。

      5 地圖組件

      地圖組件,微信小程序提供了地圖導(dǎo)航功能,使用地圖組件和地圖位置API就可以方便、快捷地實(shí)現(xiàn)地圖定位導(dǎo)航。

      6 導(dǎo)航組件

      導(dǎo)航組件,它是微信小程序中用來控制所有頁面順序的組件??梢詭椭覀儗?shí)現(xiàn)頁面的路由和跳轉(zhuǎn),使用起來相當(dāng)便捷。

      7 畫布組件

      畫布組件,它可用于實(shí)現(xiàn)一些小程序控件沒有提供的頁面元素,

      開發(fā)者可以自由地使用畫布畫出想要的頁面效果。

      上一篇
      微信小程序制作流程——新手商家一定要知道的入門小知識
      下一篇
      微信小程序開發(fā)如何做?了解這三個方面
      首頁
      電話聯(lián)系
      国产美女视频大全一区_国产精品毛片步兵在线_久久se视频色精品视频_手机在线观看AV
    2. <thead id="ximmw"><span id="ximmw"></span></thead>

      <u id="ximmw"></u>
    3. <wbr id="ximmw"><ins id="ximmw"><progress id="ximmw"></progress></ins></wbr><wbr id="ximmw"><object id="ximmw"><option id="ximmw"></option></object></wbr><wbr id="ximmw"><ins id="ximmw"><table id="ximmw"></table></ins></wbr>