# dcloud_weixin **Repository Path**: landsnow/dcloud_weixin ## Basic Information - **Project Name**: dcloud_weixin - **Description**: 1111 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-02-05 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 欢迎使用 DCLOUD_WEIXIN ![cmd-markdown-logo](/md_assets/logo.jpeg) 这是一个集成了 [umi](https://umijs.org/docs/zh-Hans/introduction.html) 和 [dva](https://github.com/dvajs/dva/blob/master/README_zh-CN.md) [antd-mobile](https://mobile.ant.design/index-cn)的架构 关于umi: >umi 是工具吗？是。但不仅仅是。我给 umi 的定位是开发框架，目前包含工具 + 路由，不包含数据和视图。 所以 umi[工具 + 路由] + dva[数据] + antd(-mobile)[视图]，很配哦。 个人觉得:umi是一套web前端工程化的解决方案,并且是可更改配置的解决方案,其设计思维类似,input上面的defaultValue,你不写我用我默认的,你要写就用你的. 关于dva: >基于 redux、redux-saga 和 react-router 的轻量级前端框架。(Inspired by elm and choo) 目录结构: ├─.gitignore ├─.umirc.js //umi 的配置文件 ├─package.json ├─src │ ├─App.css │ ├─index.css │ ├─logo.svg │ ├─pages //业务项目 umi是免路由配置的,他的理念是路径及路由,他会把pages下面的文件根据路径自动生成路由 │ │ ├─index.js //首页 │ │ ├─main // 路由为 /main 下面的页面 │ │ │ ├─_layout.js │ │ │ ├─index.js │ │ │ ├─user │ │ │ │ ├─addr.js │ │ │ │ ├─collect.js │ │ │ │ └index.js │ │ │ ├─models //main的 model文件 会自动注册到dva里面去 │ │ │ │ └main.js │ │ │ └─cart │ │ │ └index.js │ ├─library // 通用目录 │ │ ├─package.json │ │ ├─components // 通用组件库 │ │ │ ├─package.json │ │ │ │─tabBarExample │ │ │ ├─TabBarExample.js │ │ │ └TabBarExample.less │ │ ├─utils // 通用工具类 │ │ │ └httpUtil.js //用来发送http请求的工具, │ │ │ │ └─core // 业务逻辑相关配置和与业务相关的通用工具集 │ └─httpUtilConfig.json // 请求拦截器。请按照业务接口返回协议进行配置 ### 1.命令 // 初始化 > yarn install // 开始运行 （自动关闭8000端口） > npm start > 自动化打包（支持多环境构建） // 多环境接口可通过 ./src/core/httpUtilConfig/httpConfig.js 进行配置 > npm run build > 请输入IP环境（ test/dev/pro 默认test） ### 2.正确使用样式 页面中的通用样式请严格使用antd-mobile中的less样式库，尽量避免自定义样式，请使用 *.less 编写样式 @import (reference) "~antd-mobile/dist/antd-mobile.less"; .page{ color: @color-text-base; font-size: @font-size-base; } // 在react 中引用less import cardStyle from './index.less'; [antd-mobile 样式定义请参考](https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less) 如果要修改 antd-mobile 的样式定义可以修改 ./.umirc.js 中的 theme 配置字段 theme: { "brand-primary": "#e7572f", "color-text-base": "#333" }, ### 3.注册组件文档 └─src └─page └── doc ├─ components // 通用组件文档 ├─ utils // 通用工具文档 └─ font // 自定义字体图标库 > * 打开 ./src/pages/doc/components/tabBarExample 查看扩展组件示例文档的写法； > * 将写好的文档注册到 ./src/pages/doc/components/catalog.js 中； > * 组件文档将配合 ./src/library/components 下的通用组件使用，主要是提供详细的通用组件使用示列； const componentList = { Navigation: [ { title: "TabBarExample", path: "/doc/components/tabBarExample" } ], frame: [ { title: "WebView", path: "/doc/components/WebView" } ] ... // 你编写的组件 } export default componentList; ### 4.网络请求 // api接口配置文件 ./src/core/httpUtilConfig/http.config.js > * 根据用户执行（启动、打包）命令的不同，系统环境会自动进行切换 const local = { // local 为多环境配置包括：调试、开发、测试、生产 wx: './wx', // api 地址配置 ... wxurl: 'http://...' // 微信授权链接配置 (详见：5.微信和用户授权) } > * 在业务中调用网络请求 import {httpUtil} from "dcloud-utils"; import {httpUrl} from "dcloud-core"; httpUtil.get(requestConfig，hud，timeOut， isBackAll).then((response) => { // 请求成功 }).catch(error => { // 调用失败 }) > * 错误捕获 可在 ./src/core/httpUtilConfig/index.js 中配置并获取错误拦截信息 > * 路由拦截 在/src/assets/Interceptor.js中可配置不需要监听的路由，用户不登录就可以进入这些路由 // 等于以下配置的路由不会被拦截 export const hrefName = [ '/', '/main', '/main/user', '/main/search', '/main/special' ] // 包含以下配置的路由不会被拦截 export const includes = [ 'login', 'doc', 'regist', 'goods', 'error' ] ### 5.微信和用户授权 > * 如果使用微信授权，采用通用授权机制，如图： ![cmd-markdown-logo](/md_assets/auth.png) >* 微信授权中心在/src/pages/login/vauth/index.js中，用户使用微信登录的时候需要把后台返回的参数带到vauth页面中即可。（参数参照微信官方文档网页授权） if (!code) { //第一步，没有拿到code，跳转至微信授权页面获取code redirectUri = this.appendParams('https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect', { 'appid': appId, 'redirect_uri': encodeURIComponent(location.href), 'response_type': 'code', 'scope': scope, 'state': state, }); } else { //第二步，从微信授权页面跳转回来，已经获取到了code，再次跳转到登录前页面 redirectUri = this.appendParams(window.urlParames().redirect_uri, { 'code': code, 'state': state }); } location.href = redirectUri; ### 6.公共方法 > * 公共方法存放在src/library/utils/surroundings中，列举几个常用方法 判断项目是否在wx浏览器中打开 false为微信浏览器 true为其他浏览器 window.platform = () => { let platform; if(navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 || typeof navigator.wxuserAgent !== 'undefined'){ platform = false; }else{ platform = true; } return platform } 截取url后面的参数 window.urlParames = (theurl = decodeURI(window.location.hash)) => { let theUrlcode = new Object(); if (theurl.indexOf("?") != -1) { var string = theurl.substr(1); var stringx = string.split("?"); var strings = stringx[1].split("&"); for(var n = 0; n < strings.length; n ++) { theUrlcode[strings[n].split("=")[0]]=unescape(strings[n].split("=")[1]); } } return theUrlcode } 截取微信回调后携带的参数 window.wxParames = () => { let theRequest = new Object(); let url = decodeURI(window.location.search); if (url.indexOf("?") != -1) { var str = url.substr(1); var strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); } } return theRequest } 微信获取分享权限 window.share = (title = '默认title', img = 'http://test.jpg') => { let config = ''; wx.ready(function () { const origin = window.location.origin const hash = window.location.hash const pathname = window.location.pathname config = { title: title, link: origin+pathname+hash, imgUrl: img, desc: '【多彩贵州 精品黔货】', success: function () { // 成功后回调 }, cancel: function () { } } wx.onMenuShareTimeline(config); wx.onMenuShareAppMessage(config); wx.onMenuShareQQ(config); wx.onMenuShareWeibo(config); wx.onMenuShareQZone(config); }); } ## 参考资料 [antd-mobile - UI框架支撑](https://ant.design/index-cn) [umi](https://umijs.org/docs/zh-Hans/introduction.html) [dva](https://github.com/dvajs/dva/blob/master/README_zh-CN.md)