single-page-react-h5

基于React的H5活動頁面腳手架，助力你在1小時就可以完成一個H5活動頁面，這里已經幫您做了如下幾個基本事情

頁面縮放，基于寬度為750px的視覺稿，當然您也可以自行修改

頁面微信分享，只需要配置獲取分享相關的簽名接口，就可以實現

預加載loading，如果您需要，基于create.js 的 preload模塊實現

包含了Axios，你可以直接使用Axios請求相關的接口

目錄結構說明

|——build(代碼編譯后所在的文件目錄)

|——config(webpack相關的配置目錄)

|——node_modules

|——public(html模板，favicon及其他靜態資源存放目錄)

|——scripts(webpack各個環境腳本執行文件存放目錄)

|——src(項目源碼存放路徑)

| |——components(組件存放目錄，如果有？)

| |——containers(具體頁面存放目錄)

| |——...(具體看代碼)

| |——public(一些第三方庫包含的相關資源存放的目錄，比如swiper，animate.css)

| |——utils(工具函數存放目錄)

| |——index.js(webpack入口執行文件)

| |——registerServiceWorker.js(生產環境中處理文件的緩存，用來加快頁面訪問速度的)

|

|——.gitingnore

|——LICENSE

|——package-lock.json

|——package.json

|——README.md

如何使用

確認您當前的系統是否具有以下相關環境(這里說的是window系統下)

- git

- node(npm)

為了確保下載npm的體驗更好，您可以選擇以下兩種方式之一

1、安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、修改npm下載源

npm config set registry https://registry.npm.taobao.org

第一步

npm install 或者 cnpm install 安裝相關的依賴包

第二步

npm run start 啟動項目

第三步

編寫您的活動頁面相關業務邏輯代碼

第四步

npm run build 打包(編譯項目)

其他

如果您的頁面需要配置微信當中的分享，請保證與您聯調的后臺接口返回內容是如下格式的

{

success: true,

data: {

"debug": true,

"appId": "wxb17a5a75c9ad192b",

"timestamp": "1533897246",

"nonceStr": "b9aab9c2ii",

"signature": "d1c126bbcaff2f48d415fd71e92684978c0e1a1c",

"jsApiList": [

"onMenuShareTimeline",

"onMenuShareAppMessage",

"onMenuShareQQ",

"onMenuShareWeibo",

"onMenuShareQZone"

]

}

}

或者您修改utils文件夾下面的Weixin.js文件

關于資源預加載

在config.js配置資源的根路徑window.BaseUrl

在webpack的入口文件index.js里面配置資源列表Manifest

引入工具函數import PreLoad from './utils/PreLoad';

執行資源預加載函數，然后再回調函數里面初始化頁面

總結

以上是生活随笔為你收集整理的开发html5单页用什么框架,GitHub - mmcai/single-page-react-h5: 基于React框架的单页活动框架，可以基于此代码上进行相关的H5活动等相关内容的开发...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。