微信小程式

今天開始學習微信小程式，歡迎大家持續關注

MVVM-模型檢視檢視模型:

    model  view view-model  （DOM 物件的操作==> 只需要繫結的程度）

SPA-單頁面應用程式：

    單頁面：當用戶訪問一個專案時，頁面只加載一次

    內容的更新：都是在當前載入完成的主體頁面中進行資料生成，和頁面渲染

    為了方便程式的開發和管理，對於可能存在的多次使用的程式碼進行了元件化的管理

    元件中的HTML檔案不會被直接渲染，會被讀取到JS中生成DOM元素，並拼接到主體頁面中

    元件中的HTML檔案 更像是 模板檔案
 

MVC-模型檢視控制器

微信小程式

• 微信小程式是基於 MVVM 概念 的 單頁面應用程式
  
  • 資料雙向繫結
  • 框架核心 DOM 操作
  • 頁面元件化 —> 資料夾-檔案

接下來我們看看怎麼寫一個非常diao對程式碼 hello world

第一 ：下載微信開發者工具

第二：獲取微信小程式的 AppID

    登入 https://mp.weixin.qq.com ，就可以在網站的“設定”-“開發者設定”中，檢視到微信小程式的 AppID 了，注意不可直接使用服務號或訂閱號的 AppID 。

第三：建立專案

第四：編寫程式碼

• 微信小程式是基於 MVVM 概念 的 單頁面應用程式
  
  • 資料雙向繫結
  • 框架核心 DOM 操作
  • 頁面元件化 —> 資料夾-檔案

• 專案結構

  | pages //存放的是微信小程式的頁面元件
  | 元件資料夾
  | .json
  | .js
  | .wxml
  | .wxss
  | 元件資料夾
  | .json
  | .js
  | .wxml
  | .wxss
  | app.js
  | app.json
  | app.wxss
  | app.html —? 確實存在的
  | project.config.json

• project.config.json 專案配置檔案

  • 一般不需要手動修改
  • 專案的名稱，版本，程式碼語法 ……
    {
    “description”: “專案配置檔案。”, // JSON檔案的註釋
    “setting”: {
    “urlCheck”: true,
    “es6”: true,
    “postcss”: true,
    “minified”: true
    },
    “compileType”: “weapp”,
    “libVersion”: “1.5.4”,
    “appid”: “wx2b0457d718a02076”,
    “projectname”: “%E9%9F%B3%E4%B9%90”,
    “condition”: {
    “weapp”: {
    “current”: -1,
    “list”: []
    },
    “search”: {
    “current”: -1,
    “list”: []
    },
    “conversation”: {
    “current”: -1,
    “list”: []
    }
    }
    }
• app.js
  
  • 寫JS程式碼的
  • 微信小程式的入口，實現資料定義，事件定義，請求傳送……
• app.json ==> app.config檔案
  
  • 配置檔案，小程式的應用配置
  • 可以配置頁面名稱，導航，分享，功能
• app.wxss ==> 微信的 ss 檔案
  
  • css 層疊樣式表
  • wxss 微信樣式表 ==> 基本和CSS一樣

具體程式碼如下

js部分

博主開通了一個關於前端分享的微信公眾號，有興趣的小夥伴歡迎關注：
公眾號：簡單的前端

不知道能不能推薦微信公眾號，如有違反，請告知