原创 webpack入門基本使用

webpack webpack 是什麼? 官⽅方⽹網站:https://webpack.js.org/ 中⽂文⽹網站:https://www.webpackjs.com/ 更新可能有延遲 本質上,webpack 是一個現代

原创 小程序 WebSocket

wx.sendSocketMessage 通過 WebSocket 連接發送數據。需要先 wx.connectSocket,並在 wx.onSocketOpen 回調之後才能發送。 onSocketOpen 監聽 WebSock

原创 原生/CommonJS /AMD/UMD 模塊化詳解

模塊化 模塊化已經是現代前端開發中不可或缺的一部分了把複雜的問題分解成相對獨立的模塊,這樣的設計可以降低程序複雜性,提高代碼的重用,也有利於團隊協作開發與後期的維護和擴展 從 ECMAScript2015 開始引入了模塊的概念,我

原创 小程序 slot插槽

組件wxml的slot 在組件的wxml中可以包含 slot 節點,用於承載組件使用者提供的wxml結構。 默認情況下,一個組件的wxml中只能有一個slot。需要使用多slot時,可以在組件js中聲明啓用 <view>

原创 jsx使用注意事項

基於javascript個xml的擴展語法 他可以作爲值使用 他並不是字符串 他也不是html 他可以配合js表達式一起使用, 他不可以和js的 語句一起使用(for,if 等…) 所有的標籤名必須小寫,必須閉合,哪怕是單標籤

原创 React實例 列表組件

新建組件 現在SRC的目錄下面,新建一個文件Xiaojiejie.js文件,然後寫一個基本的HTML結構。代碼如下: import React,{Component} from 'react' class Xiaojiejie

原创 小程序rpx 以及rem和px的換算

小程序rpx 一般來講都會ul都會定一個設計稿的尺寸,屏幕適應都要根據設計稿尺寸極端 (1).rpx:不論哪個型號的手機,屏幕寬度都是750rpx rpx與px的轉換,根據設計稿換算 例如:設計稿750px寬度,ps上量出或者標出

原创 webpack Loader

file-loader 可以處理理 file-loader 所有的事情,但是遇到圖片格式的模塊,可以選擇性的把圖片轉成 base64 格式的字符串,並打包到 js 中,對小體積的圖片較合適,大圖不合適。 安裝指令 npm ins

原创 小程序 數據庫及雲函數

數據庫 雲開發提供了一個 JSON 數據庫,顧名思義,數據庫中的每條記錄都是一個 JSON 格式的對象。一個數據庫可以有多個集合(相當於關係型數據中的表),集合可看做一個 JSON 數組,數組中的每個對象就是一條記錄,記錄的格式是

原创 小程序 自定義組件及傳參

自定義組件 從小程序基礎庫版本 1.6.3 開始,小程序支持簡潔的組件化編程。所有自定義組件相關特性都需要基礎庫版本 1.6.3 或更高。 開發者可以將頁面內的功能模塊抽象成自定義組件,以便在不同的頁面中重複使用;也可以將複雜的頁

原创 veux第二節 mutations和actions/modules

mutations 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation(類似 redux 中的 action + reducer),Vuex 中的 mutation 非常類似於事件:每個 mutation

原创 react 生命週期-2

React生命週期中的Updation階段,也就是組件發生改變的更新階段,這是React生命週期中比較複雜的一部分,它有兩個基本部分組成,一個是props屬性改變,一個是state狀態改變(這個在生命週期的圖片中可以清楚的看到)。

原创 React 列表添加數據

讓列表數據化 現在的列表還是寫死的兩個標籤,那要變成動態顯示的,就需要把這個列表先進行數據化,然後再用javascript代碼,循環在頁面上。 我們先給上節課的list數組增加兩個數組元素,代碼如下: constructo

原创 react 單項數據流

react 單項數據流 React的特性中有一個概念叫做“單項數據流”,可能剛剛接觸React的小夥伴不太明白這個概念,還是拿出《小姐姐服務菜單》的Demo,來說。比如我們在父組件中可以直接把this.state.list傳遞過來

原创 react 通過生命週期優化組件性能

已經對React生命週期有了認識,那如何利用它提高組件的性能那?通過shouldComponentUpdate函數,改善React組件性能的例子。 小姐姐組件存在性能問題 是的,小姐姐組件已經寫的很熟悉了,但是它有一個性能問題,那