小程序的文件類型

在微信小程序中有四種文件類型，主要分樣式，骨架，業務，配置，樣式為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字段裏是放置所有頁面的配置，如頂部的背景顏色，文字顏色等。

往後余生，唯獨有你
簡書作者：達叔小生
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書博客： https://www.jianshu.com/u/c785ece603d1

結語

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

小程序當中的文件類型，組織結構，配置，知識點等