JS构建多端应用

一,需求与介绍

1.1,介绍

1,Taro 是一套遵循 React语法规范的多端开发解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码。

2,Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库

1.2,需求

一套代码,多端使用,减少开发成本

二,搭建项目

第一步：全局安装Taro 开发工具 @tarojs/cli

 npm/cnpm install -g @tarojs/cli

第二步：创建项目

 taro init YingQi

在创建完项目之后，Taro 会默认开始安装项目所需要的依赖，安装使用的工具按照 yarn>cnpm>npm 顺序进行检测。如果安装失败,可以使用如下命令安装

 npm/cnpm install

第三步：运行项目

以运行H5为例,输入如下命令

如果看到如下界面,表示运行成功

1.H5

H5预览项目

 # npm script

 $ npm run dev:h5

 # 仅限全局安装

 $ taro build --type h5 --watch

 # npx 用户也可以使用

 $ npx taro build --type h5 --watch

H5打包项目

 # npm script

 $ npm run build:h5

 # 仅限全局安装

 $ taro build --type h5

 # npx 用户也可以使用

 $ npx taro build --type h5

2.微信小程序

微信小程序预览项目

 # npm script

 $ npm run dev:weapp

 # 仅限全局安装

 $ taro build --type weapp --watch

 # npx 用户也可以使用

 $ npx taro build --type weapp --watch

微信小程序打包项目

 # npm script

 $ npm run build:weapp

 # 仅限全局安装

 $ taro build --type weapp

 # npx 用户也可以使用

 $ npx taro build --type weapp

注意:去掉 --watch 将不会监听文件修改，并会对代码进行压缩打包

其他端的预览/打包项目与H5的类似,只需把H5替换为其他的即可,如下：

百度只能小程序：swan
支付宝小程序：alipay
React-Native:rn
头条/字节跳动小程序：tt

三,配置项目架构

3.1,配置dva

第一步：安装所需的依赖

 npm/cnpm install --save dva-loading dva-core redux-logger

第二步：配置dva入口

 import Taro from '@tarojs/taro';

 import { create } from 'dva-core';

 // import { createLogger } from 'redux-logger';

 import createLoading from 'dva-loading';

 let app;

 let store;

 let dispatch;

 function createApp(opt) {

   // redux日志

   // opt.onAction = [createLogger()];

   app = create(opt);

   app.use(createLoading({}));

   // 适配支付宝小程序

   if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {

     global = {};

   }

   //注册models

   if (!global.registered) opt.models.forEach(model => app.model(model));

   global.registered = true;

   app.start();//启动

   store = app._store;

   app.getStore = () => store;

   dispatch = store.dispatch;

   app.dispatch = dispatch;

   return app;

 }

 export default {

   createApp,

   getDispatch() {

     return app.dispatch;

   },

 };

第三步：配置models文件-home

 import {STATUSSUCCESS} from '../utils/const';

 import {

     Home as namespace,

   } from '../utils/namespace';

 import {

   getSingleDataById,

 } from '../services/home';

 export default {

   namespace: namespace,//'home',

   state: {

     singleId:'',

     tableName:'',

   },

   effects: {

     *getSingleData(_, { call, put,select }) {

       const { singleId, tableName } = yield select(state => state[namespace]);

       console.log('singleId===',singleId)

       const { status, data } = yield call(getSingleDataById, {

         singleId,

         tableName,

       });

       if (status ==STATUSSUCCESS) {

         yield put({

           type: 'save',

           payload: {

             banner: data.banner,

             brands: data.brands,

           },

         });

       }

     },

   },

   reducers: {

     save(state, { payload }) {

       return { ...state, ...payload };

     },

   },

 };

第四步：配置models的统一入口

 import home from './home';

 export default [ home];

第五步：引入到项目入口文件

 import dva from './entries';

 import models from './models';

第六步：在项目入口文件配置

 ...

 import { Provider } from '@tarojs/redux';

 ...

 const dvaApp = dva.createApp({

   initialState: {},

   models: models,

 });

 const store = dvaApp.getStore();

 ...

  render() {

     return (

       <Provider store={store}>

        ...

       </Provider>

     );

   }

 ...

3.2,配置服务请求

第一步：配置请求方式与返回状态

 export const GET = 'GET';

 export const POST = 'POST';

 export const PUT = 'PUT';

 export const PATCH = 'PATCH';

 export const DELETE = 'DELETE';

 export const UPDATE = 'UPDATE';

 export const STATUSSUCCESS = 1;//成功返回状态

第二步：配置请求基础地址与日志是否打印

 import Taro from '@tarojs/taro';

 // 请求连接前缀

 export const baseUrl = Taro.getEnv() === Taro.ENV_TYPE.WEB?'':'http://localhost:8880';//web端使用代理服务,小程序端使用服务前缀

 // 开发环境输出日志信息

 export const noConsole = (process.env.NODE_ENV === 'development');

第三步：封装request

 import Taro from '@tarojs/taro';

 import {STATUSSUCCESS} from './const';

 import { baseUrl, noConsole } from '../config';

 function checkHttpStatus(response) {

   if (!!noConsole) {

     console.log('response===',response)

   }

   if (response.statusCode >= 200 && response.statusCode < 300) {

     return response.data;

   }

   const error = new Error(response.statusText);

   error.response = response;

   error.code = response.status;

   throw error;

 }

 function getResult(json) {

   // const {dispatch} = store;

   if (json.status ==STATUSSUCCESS) {

     return json;

   }

   else {

     const error = new Error(json.message || json.msg || '数据加载错误！');

     error.code = json.code;

     error.data = json;

     throw error;

   }

 }

 export default (url = '', options = {},) => {

   let data;

   let contentType;

   data = options.data;

   delete options.data;

   contentType = options.contentType;

   delete options.contentType;

   const opts = {

     url: baseUrl + url,

     method: 'POST',

     ...options

   };

   opts.header = {

     ...opts.header,

   };

 // 请求连接前缀

   if (opts.method === 'GET') {

      url = url.split('?');

      url = url[0] + '?' + QueryString.stringify(url[1] ? {...QueryString.parse(url[1]), ...data} : data);

      opts.headers['Content-type'] = contentType ? contentType : 'application/x-www-form-urlencoded'; //

   } else {

     opts.header['Content-Type'] = contentType ? contentType : 'application/x-www-form-urlencoded'; //

     opts.data = contentType === 'application/json' ? JSON.stringify(data) : serialize(data);

   }

   if (!!noConsole) {

     console.log(

       `${new Date().toLocaleString()}【 request  ${url} 】DATA=${JSON.stringify(

         data

       )}`

     );

   }

   return Taro.request(opts)

   .then(checkHttpStatus)

   .then(getResult)

   .catch(err => ({err}));

 };

第四步：请求服务

 import request from '../utils/request';

 import {PUT, POST} from '../utils/const';

 /*

 ***获取单个登录数据***

 */

 export async function getSingleDataById(data) {

   return request('/api/v1/yingqi/user/getSingleDataById', {data, method: PUT, contentType: 'application/json'});

 }

3.3,配置UI组件

第一步：安装UI组件taro-ui

 npm/cnpm install taro-ui --save

第二步：配置需要额外编译的源码模块

由于引用 `node_modules` 的模块，默认不会编译，所以需要额外给 H5 配置 `esnextModules`，在 taro 项目的 `config/index.js` 中新增如下配置项：

 h5: {

   esnextModules: ['taro-ui']

 }

第三步：使用taro-ui

 // page.js

 import { AtButton } from 'taro-ui'

 // 除了引入所需的组件，还需要手动引入组件样式

 // app.js

 import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

  <AtButton

         onClick={this.handleChange.bind(this)}>

         底部关闭幕帘

       </AtButton>

3.4,配置iconfont图标

第一步：在iconfont上创建项目

第二步：上传图标并生成代码

第三步：在项目中配置

 @font-face {

   font-family: 'iconfont';  /* project id 1076290 */

   src: url('http://at.alicdn.com/t/font_1076290_m2xyh7ml7qi.eot');

   src: url('http://at.alicdn.com/t/font_1076290_m2xyh7ml7qi.eot?#iefix') format('embedded-opentype'),

   url('http://at.alicdn.com/t/font_1076290_m2xyh7ml7qi.woff2') format('woff2'),

   url('http://at.alicdn.com/t/font_1076290_m2xyh7ml7qi.woff') format('woff'),

   url('http://at.alicdn.com/t/font_1076290_m2xyh7ml7qi.ttf') format('truetype'),

   url('http://at.alicdn.com/t/font_1076290_m2xyh7ml7qi.svg#iconfont') format('svg');

 }

 .iconfont {

   font-family: 'iconfont' !important;

   font-size: 32px;

   font-style: normal;

   -webkit-font-smoothing: antialiased;

   -moz-osx-font-smoothing: grayscale;

 }

 .icon-more:before {

   content: '\e605';

 }

第四步：使用

 <View className="iconfont icon-more arrow" />

效果如下：

四,常见问题

1,问题：使用inconfont图标时,web端没有显示图标

解决办法:在每一行//at.alicdn.com/t/font_1076290_m2xyh7ml7qi.eot前加“https:”

2,问题：Taro发起请求参数无法识别content-type类型

原因：由于常用的axios/fetch请求参数的头部是headers，而taro的是header，如果继续使用headers会引发content-type设置失效，变成默认的类型。

解决办法:headers->header

  opts.header = {

     ...opts.header,

   };