微信小程式的概要

摘要： 標題圖 微信小程式的概要 學習小程式要了解一下什麼事小程式，小程式開發前需要做哪些準備，微信小程式開發工具的使用，小程式中的目錄結構解析，檢視和渲染，事件。 小程式的配置詳解，小程式的生命週期與app物件的使用，頁面的配置，頁面的生命週期和引...

微信小程式的概要

學習小程式要了解一下什麼事小程式，小程式開發前需要做哪些準備，微信小程式開發工具的使用，小程式中的目錄結構解析，檢視和渲染，事件。

小程式的配置詳解，小程式的生命週期與app物件的使用，頁面的配置，頁面的生命週期和引數傳遞，使用者的登入，UI開發。

UI開發中的佈局基礎，樣式基礎，元件的使用，檢視容器的使用，基礎內容元件，表單元件，操作反饋小工具，導航，多媒體的使用。

地圖和LBS，畫布，首頁的屬性，api的開發，請求伺服器資料，檔案的上傳和下載，websocket實現即時聊天，圖片的選擇和呼叫微信拍照，微信錄音，獲取微信網路狀態，獲取當前位置，音訊的控制，快取資料，重力感應，獲取微信小程式的使用者資訊，微信小程式的微信支付，羅盤等

微信小程式的簡介

問：

什麼是微信小程式？

微信小程式是用來幹什麼的？

什麼樣的網際網路產品適用於微信小程式？

微信小程式將帶來哪些變革？

目錄結構詳解

專案的目錄結構

pages
->index
->index.js // 頁面入口
->index.wxml // 佈局UI
->index.wxss // 佈局樣式
->logs
->logs.js
->logs.json // 頁面的配置檔案
->logs.wxml
->logs.wxss
utils
app.js
app.json
app.wxss

檢視與渲染

元件的使用，資料的繫結，渲染標籤，模版的使用

// index.js
Page({
 data: {

 },
 onLoad: function(options) {
// 頁面的初始化
 },
 onReady: function() {
// 頁面內的渲染
 },
 onShow: function() {
// 頁面的顯示
 },
 onHide: function() {
// 頁面的隱藏
 },
 onUnload: function() {
// 頁面關閉
 }
})

渲染標籤

顯示

<view wx:if="{{true}}">dashu</view>

隱藏

<view wx:if="{{false}}">dashu</view>

迴圈

<view wx:for="{{[1,2,3]}}">
 迴圈 {{item}} {{index}}
<view>

wx:for-item="news-item"
wx:for-index="news-index"

shift(): 刪除資料

模版

templates
->header.wxml

<text>投吧</text>

// index.wxml
<include src="../templates/header"/>

templates
->footer.wxml

// footer.wxml
<template name="f1">
內容
</template>

<template name="f2">
內容
</template>

<import src="../temmplates/footer"/>
<template is="foot2" data="{{text:"匯入設定內容"}}">

如果看了覺得不錯

點贊！轉發！

結語

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