小程序模板網(wǎng)

金于虎:微信小程序認(rèn)知、安裝與demo學(xué)習(xí)摘要

發(fā)布時(shí)間:2018-03-29 18:08 所屬欄目:小程序開發(fā)教程
一:認(rèn)知

1. 技術(shù)架構(gòu)

2.前端的視圖

wxss

樣式定義類似css的樣式表,定義頁面元素的樣式

wxml

標(biāo)簽語言對(duì)html的擴(kuò)展,定義我這里面會(huì)有那些組件,會(huì)有那些元素里面。更多的是做渲染

js 觸發(fā)事件

定義觸發(fā)后又后端的那些程序來處理

3.后端的server

很多接口以jsapi的方式提供

官網(wǎng)地址

地址1 工具

例子

二:組件和數(shù)據(jù)綁定

  1. 組件的基本使用
  2. 數(shù)據(jù)綁定
  3. 條件渲染
  4. 列表渲染 http://www.runoob.com/cssref/pr-border-collapse.html

三:下載安裝

1.下載和安裝開發(fā)程序

下載地址:開發(fā)者文檔

  1. 掃描登陸
  2. 添加項(xiàng)目 (條件:微信號(hào)是需要是微信開發(fā)者)
  3. 無Appid(條件:需要Nodejs支持)

注意點(diǎn):

  1. 在SDK中有些api是依賴nodejs的
  2. 部分功能受限 指的是無法再手機(jī)上看或者預(yù)覽

2. 熟悉開發(fā)工具的使用

3. 熟悉目錄架構(gòu)

四:demo學(xué)習(xí)

1. 項(xiàng)目核心文件

app.js

app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API,

app.json

app.json 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁面組成,配置小程序的窗口背景色,配置導(dǎo)航條樣式,配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。

app.wxss

app.wxss 是整個(gè)小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

  1. 事件
  2. 全局函數(shù)
  3. 全局屬性

2. 頁面核心文件

頁面目錄和配置以及小程序首頁

微信小程序中的每一個(gè)頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中,且 pages 中的第一個(gè)頁面是小程序的首頁。

頁面組成

每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組成,如:

  1. index.js
  2. index.wxml
  3. index.wxss
  4. index.json

.js后綴的文件是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件,.wxml后綴的文件是頁面結(jié)構(gòu)文件。 注意:目錄名稱和文件名稱最好一樣

index.js

index.js 是頁面的腳本文件,在這個(gè)文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗?,聲明并處理?shù)據(jù),響應(yīng)頁面交互事件等。

index.wxss

index.wxss 是頁面的樣式表,

樣式的覆蓋,繼承和和重寫

頁面的樣式表是非必要的。當(dāng)有頁面樣式表時(shí),頁面的樣式表中的樣式規(guī)則會(huì)層疊覆蓋 app.wxss 中的樣式規(guī)則。如果不指定頁面的樣式表,也可以在頁面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。

index.json

index.json 是頁面的配置文件:

配置的覆蓋,繼承和重寫

頁面的配置文件是非必要的。當(dāng)有頁面的配置文件時(shí),配置項(xiàng)在該頁面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒有指定的頁面配置文件,則在該頁面直接使用 app.json 中的默認(rèn)配置。

demo片段

onLaunch: function () {
    //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function( 
                 
                 
 
 
 


本文地址:http://22321a.com/wxmini/doc/course/22950.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢