029-8669 1018

132 5999 8608

首页 >> 新聞資訊 >>小程序資訊 >> 小程序開發 西安小程序開發
详细内容

小程序開發 西安小程序開發

小程序開發 西安小程序開發,小程序現在正是當下的風口,有很多從業者的加入,本文希望對小程序開發 西安小程序開發有所幫助。

微信小程序已經火了一段時間了,之前一直也在關注,就這半年的發展來看,相對原生APP大部分公司還是不願意將主營業務放到微信平台上,以免受製於騰訊,不過就小程序的應用場景(用完即走和二維碼分發等)還是很值得澳门百家乐官网學習的,技術上麵如果了解React的話,會發現他們在組件化上麵有很多雷同之處。說白了,小程序就是基於微信平台的H5輕應用,微信將係統底層功能(設備、位置、媒體、文件等)和微信自身功能(登錄、支付、分享等)封裝成相應API供小程序調用。

自己根據官方文檔寫過一個DOME,借助和風天氣開放API接口,實現天氣預報,僅供學習交流使用,謝謝~

 

一、小程序基本概念

1、開發工具:為了配合小程序開發,微信專門配備了自己的開發工具,自行選擇對應版本安裝。

2、創建項目應用:安裝完成後,打開並掃碼登錄。小程序發布需要企業級的認證公眾號,所以個人訂閱號是不能發布的。所以我這裏選擇無AppID,創建項目選擇一個本地空文件夾,勾選創建quick start 項目生成一個demo。

3、編寫小程序:demo初始化並包含了一些簡單的代碼文件,其中app.js、app.json、app.wxss 這三個是必不可少的,小程序會讀取這些文件初始化實例。

  app.js是小程序的初始化腳本,可以在這個文件中監聽小程序的生命周期,申請全局變量和調用API等

  app.json是對小程序的全局配置,pages設置頁麵路徑組成(默認第一條為首頁),window設置默認頁麵的窗口表現等

  app.wxss 是整個小程序的公共樣式表。類似網站開發中的common.css

 

4、創建頁麵:在pages目錄下,由一個文件夾中的四個同名不同類型文件組成。.js是腳本文件,.json是配置文件,.wxss是樣式表文件,.wxml是頁麵結構文件,其中json和wxss文件為非必須(默認會繼承app的json和wxss默認設置)。

 

二、小程序的框架

1、小程序的配置

  app.json主要分為五個部分:pages:頁麵組,window:框架樣式(狀態欄、導航條、標題、窗口背景色),tabBar:底部菜單,networkTimeout:網絡超時設置,debug:開啟debug模式

  page.json針對頁麵單獨設置,層疊掉app.json的全局設置

 

2、小程序的邏輯

  使用App()來注冊一個小程序,必須在app.js中注冊,且不能注冊多個


  使用Page()注冊一個頁麵,在每個頁麵的js文件中注冊


3、小程序的視圖與事件綁定

  在每個頁麵中的wxml文件中,對頁麵js中data進行數據綁定,以及自定義事件綁定


 


 

4、小程序的樣式

  在每個頁麵中的wxss文件中,對wxml中的結構進行樣式設置,等同於css,擴展了rpx單位。其中app.wxss默認為全局樣式,作用所有頁麵。

 

三、小程序實戰-天氣預報(利用和風天氣API)

先看看完成後的效果,一共三個頁麵,測試demo不求美觀,不喜勿噴~

1、設置底部菜單和頁麵

澳门百家乐官网就在quick start生成的demo基礎上進行修改即可,因為涉及圖標icon,澳门百家乐官网新建一個images文件夾來存放圖片

在原先pages文件夾中,刪除index和log頁麵文件夾,新建weather、city、about三個頁麵文件夾,及三個頁麵對應的四個文件類型,文件結構如下圖

接下來配置app.json文件


 其他頁麵代碼略,項目源文件見GitHub:

 

4、注意防坑

跳轉並刷新頁麵:需使用onshow來代替onload執行邏輯,onload隻在首次打開頁麵時執行一次。如:B頁麵操作全局數據並跳轉A頁麵,A頁麵onshow中獲取全局數據更新視圖。

 


客服中心
联系方式
029-86691018
13259998608
- 谘詢
微信谘詢