微信小程序開發最多見的代碼

今天小程序小編爲你們帶來微信小程序開發最多見的代碼，喜歡的記得收藏喔！

在經過微信小程序開發者工具開發一款小程序時，起初咱們會自動生成一些文件目錄，這個文件目錄有4種不一樣的類型，主要分紅4種：.wxml 後綴的 WXML 模板文件，.wxss 後綴的 WXSS 樣式文件，.js 後綴的 JS 腳本邏輯文件以及. json 後綴的 JSON 配置文件，微信小程序的開發代碼就是由這些構成。

一、WXSS 樣式：

WXSS就是小程序版的CSS，它具備CSS 大部分的特性，小程序在 WXSS 也作了一些擴充和修改。

二、WXML 模板：

開發過網頁的人知道，網頁開發編程採用的是HTML+ CSS+JS這樣的框架組合，其中HTML是用來製做當前這個頁面的總體框架結構，CSS 用來提供結構樣式，JS 則是進行邏輯處理以及這個頁面和用戶的交互。

JS 只須要管理狀態便可:

this.setData({msg: Hello World })經過 {{ }} 的語法把一個變量綁定到界面上，咱們稱爲數據綁定。僅僅經過數據綁定還不夠完整的描述狀態和界面的關係，還須要 if/else, for等控制能力，在小程序裏邊，這些控制能力都用 wx: 開頭的屬性來表達。

三、JSON 配置：

咱們能夠看到在項目的根目錄有一個 app.json 和 project.config.json，此外在 pages/logs 目錄下還有一個 logs.json，咱們依次來講明一下他們的用途。

小程序配置 app.json

app.json 是對當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。QuickStart 項目裏邊的 app.json 配置內容以下：

{ pages:[ pages/index/index, pages/logs/logs

], window:{ backgroundTextStyle:light, navigationBarBackgroundColor:#fff, navigationBarTitleText: WeChat, navigationBarTextStyle:black

}

}

這個配置各個項的含義以下:

pages字段 —— 用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。

window字段 —— 小程序全部頁面的頂部背景顏色，文字顏色定義在這裏的。

工具配置 project.config.json

一般你們在使用一個工具的時候，都會針對各自喜愛作一些個性化配置，例如界面顏色、編譯配置等等，當你換了另一臺電腦從新安裝工具的時候，你還要從新配置。

考慮到這點，小程序開發者工具在每一個項目的根目錄都會生成一個 project.config.json，你在工具上作的任何配置都會寫入到這個文件，當你從新安裝工具或者換電腦工做時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。

頁面配置 page.json

這裏的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置。

若是你整個小程序的風格是藍色調，那麼你能夠在 app.json 裏邊聲明頂部顏色是藍色便可。實際狀況可能不是這樣，可能你小程序裏邊的每一個頁面都有不同的色調來區分不一樣功能模塊，所以咱們提供了 page.json，讓開發者能夠獨立定義每一個頁面的一些屬性，例如剛剛說的頂部顏色、是否容許下拉刷新等等。

四、JS 交互邏輯

一個服務僅僅只有界面展現是不夠的，還須要和用戶作交互：響應用戶的點擊、獲取用戶的位置等等。在小程序裏邊，咱們就經過編寫 JS 腳本文件來處理用戶的操做。

{{ msg }}點擊我

點擊 button 按鈕的時候，咱們但願把界面上 msg 顯示成 Hello World，因而咱們在 button 上聲明一個屬性: bindtap ，在 JS 文件裏邊聲明瞭 clickMe 方法來響應此次點擊操做：

Page({

clickMe: function() { this.setData({ msg: Hello World})

}

})

此外你還能夠在 JS 中調用小程序提供的豐富的 API，利用這些 API 能夠很方便的調起微信提供的能力，例如獲取本地存儲、用戶信息、微信支付等。

以上4種是微信小程序開發最多見的代碼，但願能幫到你們。