小程序開發(fā)教程
1.小程序代碼構(gòu)成代碼結(jié)構(gòu)
.json 后綴的 JSON 配置文件
.wxml 后綴的 WXML 模板文件
.wxss 后綴的 WXSS 樣式文件
.js 后綴的 JS 腳本邏輯文件
2.小程序由邏輯層和渲染層構(gòu)成 小程序框架
小程序開發(fā)框架的目標(biāo)是通過盡可能簡(jiǎn)單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗(yàn)的服務(wù)。
整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和 視圖層（View）。小程序提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。
3.小程序頁(yè)面配置分為全局配置和頁(yè)面配置 配置
全局配置：小程序根目錄下的 app.json 文件用來對(duì)微信小程序進(jìn)行全局配置。文件內(nèi)容為一個(gè) JSON 對(duì)象
頁(yè)面配置：每一個(gè)小程序頁(yè)面也可以使用 .json 文件來對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。頁(yè)面中配置項(xiàng)在當(dāng)前頁(yè)面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)
4.渲染層語法結(jié)構(gòu) wxml
5.渲染層到邏輯層 傳遞事件處理以及數(shù)據(jù) 事件處理
事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
事件對(duì)象可以攜帶額外信息，如 id, dataset, touches。
6.路由-頁(yè)面跳轉(zhuǎn)
1.wx.switchTab(Object object) 跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
- wx.reLaunch(Object object) 關(guān)閉所有頁(yè)面，打開到應(yīng)用內(nèi)的某個(gè)頁(yè)面
- wx.redirectTo(Object object) 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面
- wx.navigateTo(Object object) 保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。使用 wx.navigateBack 可以返回到原頁(yè)面。小程序中頁(yè)面棧最多十層。
- wx.navigateBack(Object object) 關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面?？赏ㄟ^ getCurrentPages 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。
- EventChannel 頁(yè)面間事件通信通道
7.CSS 布局知識(shí)點(diǎn)
css樣式選擇器
彈性盒子模型基本布局模型flex
CSS布局： Static 默認(rèn)布局 ，F(xiàn)low 固定布局，layer 層布局模型，F(xiàn)loat 浮動(dòng)布局模型
布局教程
position和z-index
什么是層布局模型？
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個(gè)圖層能夠精確定位操作，但在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，由于網(wǎng)頁(yè)大小的活動(dòng)性，層布局沒能受到熱捧。但是在網(wǎng)頁(yè)上局部使用層布局還是有其方便之處的。下面我們來學(xué)習(xí)一下html中的層布局。
層模型有三種形式：
1、絕對(duì)定位(position: absolute)
2、相對(duì)定位(position: relative)
3、固定定位(position: fixed)
層模型--絕對(duì)定位
如果想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。
當(dāng)某個(gè)absolute定位元素的父元素具有position:relative/absolute/fixed時(shí)，定位元素都會(huì)依據(jù)父元素而定位，而父元素沒有設(shè)置position屬性或者設(shè)置了默認(rèn)屬性，那么定位屬性會(huì)依據(jù)html元素來定位。
層模型--相對(duì)定位
如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置position:relative（表示相對(duì)定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)
層模型--固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響
fixed定位是指元素的位置相對(duì)于瀏覽器窗口是固定位置，即使窗口是滾動(dòng)的它也不會(huì)滾動(dòng)，且fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，且它會(huì)和其他元素發(fā)生重疊。
相對(duì)定位和絕對(duì)定位的配合使用
使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對(duì)于瀏覽器（body）設(shè)置定位以后，大家有沒有想過可不可以相對(duì)于其它元素進(jìn)行定位呢？
1、參照定位的元素必須是相對(duì)定位元素的前輩元素：
<div id="box1">
<div id="box2">相對(duì)參照元素進(jìn)行定位</div>
</div>
從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;
box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進(jìn)行偏移定位了。
box2{
position:absolute;
buttom:0px;
left:0px;
}
這樣box2就可以相對(duì)于父元素box1定位了，box2定位于box1的底部居左。
水平居中
行內(nèi)元素怎么進(jìn)行水平居中
如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)，水平居中是通過給父元素設(shè)置 text-align:center 來實(shí)現(xiàn)的。
(定寬塊狀元素：塊狀元素的寬度width為固定值。)
滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實(shí)現(xiàn)居中的。
不定寬度的塊狀元素居中
1.設(shè)置 [display: inline]方法：與第一種類似，顯示類型設(shè)為 行內(nèi)元素，進(jìn)行不定寬元素的屬性設(shè)置
- 設(shè)置 [position:relative] 和 left:50%：利用 相對(duì)定位 的方式，將元素向左偏移 50% ，即達(dá)到居中的目的,通過給父元素設(shè)置 [float]然后給父元素設(shè)置 [position:relative] 和 left:50%，子元素設(shè)置 position:relative 和 left:-50% 來實(shí)現(xiàn)水平居中。
垂直居中
父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的 height 和[ line-height ]高度一致來實(shí)現(xiàn)的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。
父元素高度確定的多行文本、圖片等的豎直居中
css 中有一個(gè)用于豎直居中的屬性 vertical-align，在父元素設(shè)置此樣式時(shí)，會(huì)對(duì)inline-block類型的子元素都有用
** 隱性改變display類型**
有一個(gè)有趣的現(xiàn)象就是當(dāng)為元素（不論之前是什么類型元素，display:none 除外）設(shè)置以下 2 個(gè)句之一：
- [position : absolute]
- float : left 或 [float:right]
簡(jiǎn)單來說，只要html代碼中出現(xiàn)以上兩句之一，元素的display顯示類型就會(huì)自動(dòng)變?yōu)橐?display:inline-block [塊狀元素]的方式顯示，當(dāng)然就可以設(shè)置元素的 width 和 height 了，且默認(rèn)寬度不占滿父元素。
8.小程序緩存本地?cái)?shù)據(jù)緩存
小程序本地緩存有四種操作，八個(gè)方法（每種操作都分為同步異步兩種）
setStorage 保存，getStorage 獲取，removeStorage 移除單個(gè)，clearStorage 全部清除
wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync
同一個(gè)微信用戶，同一個(gè)小程序 storage 上限為 10MB。storage 以用戶維度隔離，同一臺(tái)設(shè)備上，A 用戶無法讀取到 B 用戶的數(shù)據(jù)；不同小程序之間也無法互相讀寫數(shù)據(jù)
9.頁(yè)面交互 Toast Loading 底部彈窗 彈框
wx.showToast(Object object) 顯示消息提示框
wx.showModal(Object object) 顯示模態(tài)對(duì)話框
wx.showLoading(Object object) 顯示 loading 提示框。需主動(dòng)調(diào)用 wx.hideLoading 才能關(guān)閉提示框
wx.showActionSheet(Object object) 顯示操作菜單
10.小程序插件使用小程序插件
11.使用第三方組件有贊 Vant
1.在微信開發(fā)工具軟件 項(xiàng)目目錄下右鍵->在終端打開->輸入 npm init->一直回車到結(jié)束
2.安裝vant -># 通過 npm 安裝 -> 在終端下輸入 ：npm i @vant/weapp -S --production
- 構(gòu)建 npm 包
打開微信開發(fā)者工具，點(diǎn)擊 工具 -> 構(gòu)建 npm，詳情->本地設(shè)置->勾選 使用 npm 模塊 選項(xiàng)，構(gòu)建完成后，即可引入組件
image
12.小程序模塊化微信小程序引用外部js
](https://developers.weixin.qq.com/miniprogram/dev/reference/api/require.html)
1.微信小程序在js文件中通過module.exports或者exports兩者方法完成模塊的定義和暴露接口
function sayHello(name){
console.log("hello (name) !")
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
//config.js
//對(duì)變量的定義和暴露接口
const config={
api_base_url: "https://www.someweb.com/api"
}
export {config}
//或者
const config.exports={
api_base_url: "https://www.someweb.com/api"
}
2.引用
//引入變量
import {config} from '../config.js'
//或者
var config = require('../config.js')
//引入函數(shù)
var common = require('../common.js')
common.sayHello('steven')
common.sayGoodbye('Bob')
//引入類
import { HomeModule } from "../config.js";
var homeModule = new HomeModule(listUrl);
