微信小程序

2020-04-28 16:32 更新

讓我們在一分鐘內(nèi)開啟一個微信小程序項目吧!

創(chuàng)建項目

$ npx degit remaxjs/template-wechat my-app
$ cd my-app && npm install

運行項目

$ npm run dev

打開微信調(diào)試器,選中項目 dist 目錄,你將看到

成功!

項目結(jié)構(gòu)

現(xiàn)在我們來看一下 Remax 應(yīng)用的結(jié)構(gòu):

my-app/
┳ package.json
┣ dist/
┣ node_modules/
┣ src/
┗━┓ app.js
┣ app.css
┣ app.config.js
┣ pages/
┗━┓ index/
┗━┓
┣ index.js
┣ index.module.css
┣ index.config.js

dist 為打包編譯后的文件目錄。

在開發(fā)階段我們無需關(guān)心打包結(jié)果的兼容性及體積,所以 remax 打包結(jié)果為未壓縮版本,在需要上傳代碼時應(yīng)勾選小程序的 代碼壓縮樣式補全選項

src 為源文件目錄

app.js 入口文件

app.css 全局樣式文件

app.config.js 為小程序全局配置文件,對應(yīng) app.json

module.exports = {
pages: ['pages/index/index'],
window: {
navigationBarTitleText: 'My App',
},
};

pages 存放項目頁面

pages/index/index.js 頁面文件,對應(yīng)小程序 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>
);
};

默認導(dǎo)出的的 React 組件就是當(dāng)前的頁面

Remax 針對不同平臺有對應(yīng)的實現(xiàn),如 remax/alipayremax/wechat,remax/toutiao 等等,開發(fā)者可根據(jù)需要選擇對應(yīng)的平臺。

index.module.css 頁面樣式文件

index.config.js 頁面配置文件,會自動轉(zhuǎn)換成小程序頁面配置文件 index.json



以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號