小程式的檔案型別

在微信小程式中有四種檔案型別，主要分樣式，骨架，業務，配置，樣式為wxss，這裡的wxss與頁面的css相類似，骨架為wxml，這裡的wxml於頁面的html相類似，業務邏輯都是以js為結尾，配置檔案為json結尾。

以.json為字尾的檔案為json配置檔案，以.wxml為字尾的檔案為wxml模板檔案，以.wxss為字尾的檔案為wxss的樣式檔案，以.js為字尾的檔案為js指令碼邏輯檔案。

小程式檔案結構擁有app.js，app.json，app.wxss，Page->wxml，wxss，js，json。

json的配置，在專案中有

app.json
project.config.json
logs.json
 

app.json為專案小程式的全域性配置，可以配置所有頁面的路徑，介面表現，網路超時時間，底部tab等。

// 簡書作者：達叔小生
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
 

工具配置 project.config.json
頁面配置 page.json
WXML 模板

網頁是由HTML + CSS + JS組合的，html來描述頁面結構的，css是用來描述頁面樣式的，js是用來使頁面和使用者互動的。

這裡的wxml就和頁面中的html一樣哦！

wxml與html有點不一樣哦

就是標籤不一樣，html用的是div, p, span，wxml用的是view, button, text，還有很多。還有wx:if 和 {{}} 表示式，在網頁是用js操作dom的，在學頁面的時候為了很好的開發，就有了mvvm的模式，需要我們學習react，vue等，都是把渲染和邏輯分開的，在wxml

全域性配置app.json

pages頁面路徑列表
window預設視窗表現
tabBar底部 tab 欄的表現
networkTimeout網路超時時間
debug是否開啟 debug 模式

pages:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

window:

navigationBarBackgroundColor導航欄背景顏色
navigationBarTextStyle導航欄標題顏色
navigationBarTitleText導航欄標題文字內容
navigationStyle導航欄樣式
backgroundColor視窗的背景色
backgroundTextStyle下拉 loading 的樣式

tabBar

color tab 上的文字預設顏色
selectedColor tab 上的文字選中時的顏色
backgroundColor tab 的背景色
list 最少2個、最多5個 tab
position tabBar的位置
pagePath 頁面路徑
text tab 上按鈕文字

networkTimeout

request 
connectSocket
uploadFile
downloadFile

WXML

// 資料繫結
<view> {{message}} </view>
Page({
  data: {
    message: 'Hello!'
  }
})

// 列表渲染
<view wx:for="{{array}}"> {{item}} </view>
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

// 模板
<template name="Name">
 <view>
 
 </view>
</template>
<template is="Name" data=""></template>

引用提供兩種檔案引用方式import和include

import

<!-- itemDemo.wxml -->
<template name="itemDemo">
  <text>{{text}}</text>
</template>

<import src="itemDemo.wxml"/>
<template is="itemDemo" data="{{text: 'itemDemo'}}"/>

include拷貝到 include 位置

//
<!-- indexDemo.wxml -->
<include src="headerDemo.wxml"/>
<view> body </view>
<include src="footerDemo.wxml"/>
//
<!-- headerDemo.wxml -->
<view> header </view>
//
<!-- footerDemo.wxml -->
<view> footer </view>

小程式的啟動

App({
  onLaunch: function () {
    // 小程式啟動後 觸發
  }
})

執行機制

冷啟動和熱啟動

getApp(Object)用來獲取消小程式app例項的。

程式與頁面

Page({
  data: {
    ...
  },
  onLoad: function () {
    // 頁面渲染後 執行
  }
})

Page(Object)

data 頁面的初始資料

• 載入
• 顯示
• 頁面初次渲染完成
• 頁面隱藏
• 頁面解除安裝

尺寸單位

rpx：為可以根據螢幕寬度自動適應。規定螢幕寬為750rpx。

樣式匯入：使用@import語句

/** add.wxss **/
.b-p {
  padding:5px;
}
/** app.wxss **/
@import "add.wxss";
.a-p {
  padding:15px;
}

事件詳解

touchstart 手指觸控，動作開始
touchmove 手指觸控後，移動
touchcancel 手指觸控，動作被打斷
touchend 手指觸控，動作結束
tap 手指觸控後，馬上離開

釋出前的準備：使用者身份，預覽，上傳程式碼，小程式的版本，上線，提交稽核

在pages欄位裡是用來放置所有頁面路徑的，只要新增就可以自動生成哦，window欄位裡是放置所有頁面的配置，如頂部的背景顏色，文字顏色等。

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊