作者：zhangxiaobin
創作時間：2020年 3月12日
個人微信公眾號：【微新悅】
背景：今天公司要求用React開發小程式，what?我第一反應，react能開發小程式了？作為一個使用了vue長達3年的程式猿的我來說，心里一萬只螞蚱經過，哦？不慌，吃口藥，我可以的，懷著半信半疑的心態去百度上搜搜了一下，哇去，還真有，度娘討論的比較多的是 taro 和 remax，
remax，使用真正的 React 構建小程式 -- 這句話引起我深入探索的興趣，
為了不浪費讀者們的寶貴時間，在下先貼上自己摸索了半天的心得（在下會在本系列文章中，逐步帶大家用remax構建一個完善的技術架構，請不要離開，緊跟我的步伐）
初識體驗：
與原生小程式不同之處，使用了react的語法糖，通過在js-return渲染頁面，樣式檔案通過import引入，
目前還不滿意的地方，自定義封裝組件，組件之間的引入與引數傳遞，后面會繼續探索，
remax官網: https://remaxjs.org/
（1）、remax介紹 -- 來自螞蟻金服的前端工程師 @邊柳
問題1：為什么要用react開發小程式
回答：微信小程式在商業中取得非常大的成功，react本身有龐大的技術生態，可以使用react所有特性，可以愉快的使用TypeScript，
（2）、渲染原理
小程式中是沒有 DOM 的，我們寫的代碼運行在一個與 DOM 隔離的獨立執行緒中，Remax 在這里引入一層叫 VNode 的抽象層，我們會先把 React 的虛擬 DOM 映射到 VNode 上，然后把 VNode 轉換成小程式頁面的 data，然后在小程式模板里把這個 data顯示成界面
專案開擼：
命令視窗下執行：
$ npx degit remaxjs/template-wechat-typescript my-app
$ cd my-app
運行專案：
$ npm run dev
核心講解點：
（1）、app.config.js 為小程式全域組態檔，對應 app.json
在pages 集合里，配置頁面路由
（2）、pages/index/index.js 頁面檔案，對應小程式 Page 方法
import * as React from 'react'; import { View, Text } from 'remax/wechat'; import './index.module.css'; export default () => { return ( <View> <Text>pages/index/index</Text> </View> ); };
（3）、css前處理器安裝
npm install less --save # less 用戶
npm install node-sass --save # sass 用戶
（4）、頁面之間的跳轉方式之一
wx.navigateTo({ url: '/pages/demo/demo?coed=1' })
（5）、http請求封裝（基于wx.request）進行promise封裝
let wxRequest = (url: string, config: any, resolve, reject) => { let { data = {}, contentType = 'application/json', method = 'GET', ...other } = { ...config } wx.request({ url: url, data: { ...data }, method: method, header: { 'content-type': contentType, 'Cookie': '' // 全域變數中獲取 cookie }, success: (data) => { console.log(data.statusCode) let wx_succes = () => { resolve(data) } let wx_fail = () => { const ERR_CODE_LIST = { //常見錯誤碼串列 [400]: "請求錯誤", [401]: "登錄失效或在其他地方已登錄", [403]: "拒絕訪問", [404]: "請求地址出錯", [408]: "請求超時", [500]: "服務器內部錯誤", [501]: "服務未實作", [502]: "網關錯誤", [503]: "服務不可用", [504]: "網關超時", [505]: "HTTP版本不受支持" } let stateArray = [400, "string", false]; const errMsg = ERR_CODE_LIST[data.statusCode] wx.showToast({ mask: true, title: errMsg, icon: 'none', //如果要純文本，不要icon，將值設為'none' duration: 2000 }) resolve(false) } data.statusCode == 200 ? wx_succes() : wx_fail() }, fail: (err) => { wx.showToast({ mask: true, title: '請求錯誤！' + err.errMsg, icon: 'none', //如果要純文本，不要icon，將值設為'none' duration: 2000 }) reject(err) } }) } export default wxRequest;
組件內的使用如下：pages/index/index
import * as React from 'react'; import { View, Text, Image } from 'remax/wechat'; import styles from './index.module.css'; import wxRequest from '@/serve/request.ts'; import { useShow, useQuery, unstable_useNativeEffect, } from 'remax'; export default () => { const [aa, setAA] = React.useState(aa, 0); const [width, setWidth] = React.useState(width, 0); const [height, setHeight] = React.useState(height, 0); let handleClick = () => { console.log('點擊了') wx.navigateTo({ url: '/pages/demo/demo?coed=1' }) } useShow(() => { let url = 'jjjj' var promise = new Promise((resolve, reject) => { wxRequest(url, {}, resolve, reject) }) // return promise return promise.then(res => { console.log(res) setAA(900) }).catch(err => { console.log(err) }) setTimeout(() => { setWidth(100) }, 3000) setTimeout(() => { setHeight(100) }, 3000) }); unstable_useNativeEffect(() => { console.log('width', width, 'height', height); // 只有在 width 變化時，才執行這個邏輯， // 建議一定要寫 hooks 依賴，否則所有 setData 回呼后，都會在這里執行 }, [width]); return ( <View className={styles.app}> uiii <View className={styles.header} > <view > <Image src="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*OGyZSI087zkAAAAAAAAAAABkARQnAQ" onClick={handleClick} /> </view> <View onClick={handleClick} className={styles.text}> 編輯{aa} <Text className={styles.path}>src/pages/index/index.tsx</Text> 開始 </View> </View> </View> ); };
這樣我們的專案基本上可以愉快的進行開發了，感謝你的閱讀，歡迎關注與點贊----- 一個有想法的攻城獅日常發文，歡迎評論互動，
個人微信公眾號：【微信悅】
微信公眾號原文鏈接：https://mp.weixin.qq.com/s/lMDaxaJ-dPoiqlAnks_dsw
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/96623.html
標籤：JavaScript
上一篇：js函式多載
下一篇：創意網站導航和輪播圖欣賞