微信小程序——代碼構成

經過上一章講解,咱們瞭解到如何初始化一個小程序項目,這裏是官方給到demo地址,經過demo來看教程更方便於咱們理解項目架構。javascript

由四種文件構成:html

  1. .json 後綴的 JSON 配置文件
  2. .wxml 後綴的 WXML 模板文件
  3. .wxss 後綴的 WXSS 樣式文件
  4. .js 後綴的 JS 腳本邏輯文件

json配置前端

  • app.json至關於一個項目的路由機制,以及全局設置,含義和簡單示例以下,其餘詳細配置參考小程序的配置 app.json
  1. pages字段 —— 用於描述當前小程序全部頁面路徑,這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。
  2. window字段 —— 小程序全部頁面的頂部背景顏色,文字顏色定義在這裏的
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
  • project.config.json配置針對各自喜愛作一些個性化配置,例如界面顏色、編譯配置等等,小程序開發者工具在每一個項目的根目錄都會生成一個 project.config.json,你在工具上作的任何配置都會寫入到這個文件,當你從新安裝工具或者換電腦工做時,你只要載入同一個項目的代碼包,開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置,其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。參考文檔 開發者工具的配置
  • page.json用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置,page.json是定義全局,而page.json是定義某個頁面。參考文檔 小程序的配置 page.json

WXML,WXSS,JS模版java

  • WXML學前端的應該都知道HTML + CSS + JS,那麼就不難理解wxml,wxss,js了,給個官網例子,很容易理解和上手使用,特別是對於學過react native的人來講,一看就明白
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像暱稱 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
  • WXSS和CSS相比,無需再根據屏幕尺寸換算適配方式了,WXSS在底層支持新的尺寸單位 rpx,省去了麻煩的換算步驟。和前邊 app.json, page.json 的概念相同,app.wxss是定義全局樣式,page.wxss是定義某個頁面樣式。此外,WXSS僅支持不放CSS選擇器。更詳細的文檔能夠參考 WXSS
  • JS裏是寫一些邏輯來顯示交互效果的,語法上也很容易理解,看例子吧
//WXML
<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>

//JS
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})
相關文章
相關標籤/搜索