微信小程式開發過程的簡易教程

2022-09-24 02:18:11 字數 1465 閱讀 7272

微信小程式開發的第一天

0.**太麻煩了,先看一遍官方手冊吧

1.微信開發環境的安裝:

1.安裝開發者工具

2.安裝nodejs的環境

2.程式的目錄和結構:

當使用快速開始的模板的時候,會自動的生成幾個檔案

1. .json字尾的json配置檔案

2. wxml ---html

3. wxss ---css

4. js ---js檔案

1.json檔案的作用

1.app.json

作用:公共樣式的配置

一級目錄--乙個入口

**:"pages":[

//裡面的元素,是微信小程式的每乙個頁面啊

"window":}

3.執行的機制

就是mvvm的方式

使用了資料的繫結-----越來越像vue了

3.wxss檔案:

理解:樣式檔案,類似於css

與css的區別:

1.相容大部分css樣式

2.使用了新的語法

rpx :作為單位--這個沒使用過(或者是rem的翻版???)

4.js的互動邏輯

理解:還是js檔案

區別:1.有了像vue一樣的生命週期一樣的東西

2.提供了一些小程式使用的api

小程式的能力

1.小程式的啟動:(頁面的執行順序)

1.使用者開啟小程式

小程式**到本地

2.入口檔案---也就是那個主路由

app.json檔案,獲取頁面的路由

3.微信軟體渲染

微信客戶端,讀去pages欄位的第乙個路由(預設為首頁)

把夜歌首頁的**裝載進來,

並且,渲染出這個頁面

4.然後,onlaunch 事件被觸發

1. 類似於nodejs --這個是事件驅動的

2. 這個,屬於生命週期初始化完了吧

3.初始化結束

5.頁面只有乙個例項,全部頁面共享

單頁面引用 ---這就是vue(確定了..哈哈哈)

2.程式與頁面:

單個頁面的裝載順序

以pages/logs/logs 頁面為例

1.找公共的視窗樣式

2.裝載wxml和wxss

注意:這裡,貌似也會進行例項化

vue的子元件('子頁面'),也是都需要例項化的

3.微信小程式提供的元件:

理解:就是**的封裝

類似於vue的元件,也有元件之間的傳值

小程式,將他們封裝在標籤裡面

**:涉及了元件的傳值,

4.微信提供的一些api

案例:(看手冊就好)

1.地理位置

2.掃一掃

理解:這些方法或者屬性屬於wx 這個物件,

那麼,wx 是全域性物件嗎??? --一會兒試試

非同步,剛好試試es6的promise 和 一些es6的方法

微信小程式 開發過程記錄

在page的js檔案中,可以使用selectcomponent來獲取自定義元件,但注意如果該元件處於隱藏狀態得到的將是null 在父元件中追加 bind custom event name function name 在子元件中激發事件 this.triggerevent custom event ...

微信小程式語音識別開發過程筆記

在小程式中識別使用者語音輸入的命令 錄音儲存 上傳錄音檔案到伺服器後台 讀取伺服器返回結果 關鍵 按鍵按下事件 startrec function res else 顯示識別成功 wx.showtoast 上傳識別 fail function wx.playvoice fail function r...

微信小程式入門系列簡易教程

微信小程式入門系列簡易教程。自1月9日微信小程式 以下簡稱小程式 發布以來,迅速火遍朋友圈,我也前後看了很多關於小程式的文章,自己也嘗試著做了一點自己的小程式,最後的感受也讓我加深了之前在某篇文章上看到的一句話 我們可能高估了小程式在短時間內的威力,同時也很可能低估了他長時間的潛力 到現在我覺得我們...