├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── .wepyignore ├── README.md ├── package-lock.json ├── package.json ├── project.config.json ├── screenshots ├── 1.jpeg ├── 2.jpeg ├── 3.jpeg ├── 4.jpeg ├── 5.jpeg └── 6.jpeg ├── src ├── api │ └── api.js ├── app.wpy ├── components │ ├── comment_list.wpy │ ├── common │ │ ├── bottom_load_more.wpy │ │ └── placeholder.wpy │ ├── discover.wpy │ ├── filter_bar.wpy │ ├── filter_slider.wpy │ ├── rate.wpy │ ├── search.wpy │ └── shop_grid_list.wpy ├── images │ ├── alert.png │ ├── authorize.png │ ├── empty_cart.png │ ├── error.png │ ├── icon_cart.png │ ├── icon_cart_active.png │ ├── icon_category.png │ ├── icon_category_active.png │ ├── icon_home.png │ ├── icon_home_active.png │ ├── icon_info.png │ ├── icon_info_active.png │ ├── info │ │ ├── icon_my_01.png │ │ ├── icon_my_02.png │ │ ├── icon_my_03.png │ │ ├── icon_my_04.png │ │ ├── icon_my_05.png │ │ ├── icon_my_06.png │ │ └── icon_my_07.png │ ├── loadding.gif │ ├── nav │ │ ├── icon_nav_01_new.png │ │ ├── icon_nav_02_new.png │ │ ├── icon_nav_03_new.png │ │ └── icon_nav_04_new.png │ └── rate │ │ ├── half.png │ │ ├── normal.png │ │ └── selected.png ├── index.template.html ├── pages │ ├── authorization.wpy │ ├── cart.wpy │ ├── category.wpy │ ├── goods_detail.wpy │ ├── home.wpy │ ├── home_detail.wpy │ ├── info.wpy │ └── search.wpy ├── plugins │ └── wxParse │ │ ├── html2json.js │ │ ├── htmlparser.js │ │ ├── showdown.js │ │ ├── wxDiscode.js │ │ ├── wxParse.js │ │ ├── wxParse.wxml │ │ └── wxParse.wxss ├── styles │ ├── base.less │ ├── icon.less │ └── style.less └── utils │ ├── constant.js │ ├── md5.js │ ├── tip.js │ ├── util.js │ └── wxRequest.js └── wepy.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/* 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | globals: { wx: true }, 4 | parser: 'babel-eslint', 5 | parserOptions: { 6 | sourceType: 'module' 7 | }, 8 | env: { 9 | browser: true 10 | }, 11 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 12 | extends: 'standard', 13 | // required to lint *.wpy files 14 | plugins: [ 15 | 'html' 16 | ], 17 | settings: { 18 | 'html/html-extensions': ['.html', '.wpy'] 19 | }, 20 | // add your custom rules here 21 | 'rules': { 22 | // allow paren-less arrow functions 23 | 'arrow-parens': 0, 24 | // allow async-await 25 | 'generator-star-spacing': 0, 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 28 | 'space-before-function-paren': 0 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /.wepyignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | *.wpy___jb_tmp___ 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fashion Mall 2 | 3 | 这是用 Wepy 开发的一个服装购物商场小程序。主要是参考了 [wepy-mall](https://github.com/dyq086/wepy-mall)，但在它的基础上做了一些代码的优化，包括代码风格，命名等。 4 | 5 | 在学习开发的过程中，将各个模块分成9个不同的 branch，目的是让初学者更容易上手。相当于一步一步从头开始带这你写小程序。同时，配套了一个本地可以运行的 mock server [fashion-mall-server](https://github.com/weimingwill/fashion-mall-server)，可以更容易的看数据，进行API的测试和再开发。 6 | 7 | ## 使用指南 8 | 9 | ### 安装 10 | 11 | ```bash 12 | git clone https://github.com/weimingwill/fashion-mall.git 13 | cd fashion-mall 14 | npm install 15 | ``` 16 | 17 | ```bash 18 | npm install wepy-cli -g 19 | ``` 20 | 21 | ```bash 22 | wepy build --watch 23 | ``` 24 | 25 | ### 看演示 26 | 27 | 运行完上面的代码后，将 fashion-mall 下面的 `dist` 文件夹导入 微信开发者工具 可以了。 28 | 29 | #### 微信开发者工具设置（重要！） 30 | 31 | 在 微信开发者工具 任务栏 里的 `详情` -> `本地设置` 里，进行下面这些配置： 32 | 33 | > es6: 对应关闭ES6转ES5选项，关闭。 重要：未关闭会运行报错。 34 | > 35 | > postcss: 对应关闭上传代码时样式自动补全选项，关闭。 重要：某些情况下漏掉此项也会运行报错。 36 | > 37 | > minified: 对应关闭代码压缩上传选项，关闭。重要：开启后，会导致真机computed, props.sync 等等属性失效。（注：压缩功能可使用WePY提供的build指令代替，详见后文相关介绍以及Demo项目根目录中的wepy.config.js和package.json文件。） 38 | > 39 | > urlCheck: 对应不检查安全域名选项，开启。 如果已配置好安全域名则建议关闭。 40 | 41 | 具体设置的地方可能会随着开发者工具更新而改变，如果变了可以直接搜索一下。 42 | 43 | ### 目录结构 44 | 45 | ``` 46 | src 47 | ├── api 48 | │   └── api.js // 接口定义 49 | ├── app.wpy // 入口文件 50 | ├── components // 组件 51 | │   ├── comment_list.wpy // 评论 52 | │   ├── common 53 | │   │   ├── bottom_load_more.wpy // 底部加载 54 | │   │   └── placeholder.wpy // 空列表 55 | │   ├── discover.wpy // 发现组建 56 | │   ├── filter_bar.wpy // 筛选栏组建 57 | │   ├── filter_slider.wpy // 筛选右侧栏 58 | │   ├── rate.wpy // 评分 59 | │   ├── search.wpy // 搜索 60 | │   ├── shop_grid_list.wpy // 购物商品矩阵 61 | ├── images // 图片文件夹 62 | ├── pages // 页面 63 | │   ├── authorization.wpy // 授权 64 | │   ├── cart.wpy // 购物车 65 | │   ├── category.wpy // 分类 66 | │   ├── goods_detail.wpy // 商品详情 67 | │   ├── home.wpy // 首页 68 | │   ├── home_detail.wpy // 首页详情 69 | │   ├── info.wpy // 我的 70 | │   └── search.wpy // 搜索 71 | ├── plugins 72 | │   └── wxParse // 小程序富文本 73 | ├── styles // 样式 74 | └── utils // 帮助文件夹 75 | ``` 76 | 77 | ### 开发前最好有一些基础知识 78 | 79 | 1. HTML, CSS, Javascript 80 | 81 | 2. 小程序开发的基础知识：代码结构、配置文件、运行机制、加载机制、生命周期等。可以参考[官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/)。极客时间的 9小时搞定微信小程序开发 制作的还不错，可以考虑。 82 | 83 | 3. [Wepy 官方文档](https://tencent.github.io/wepy/document.html#/) 84 | 85 | 86 | ### 部分功能截图 (From Wepy Mall) 87 | 88 | 89 | 90 |
91 | 92 | 93 | 94 |
95 | 96 | 97 | 98 | 99 | ### Branches 100 | 101 | * master：用 `wepy new standard ` 初始化后得到的模版，修复了很多个 npm package 的问题。 102 | * 1.tab-bar：创建了 tabbar 103 | * 2.authorization：初次登陆，授权访问 104 | * 3.info：个人页面 105 | * 4.home-page：首页 106 | * 5.category：分类页 107 | * 6.home_detail：展示首页图片相关的所有商品（比较复杂） 108 | * 7.goods_detail：商品详情（比较复杂） 109 | * 8.cart：购物车 110 | * 9.search：搜索功能 111 | * develop：包含了所有的功能，最新的 branch 112 | 113 | 每一次的更改可以看这些 [Pull Request](https://github.com/weimingwill/fashion-mall/pulls)。 114 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fashion-mall", 3 | "version": "0.0.2", 4 | "description": "Learn wepy by building wepy-mall", 5 | "main": "dist/app.js", 6 | "scripts": { 7 | "dev": "wepy build --watch", 8 | "build": "cross-env NODE_ENV=production wepy build --no-cache", 9 | "dev:web": "wepy build --output web", 10 | "clean": "find ./dist -maxdepth 1 -not -name 'project.config.json' -not -name 'dist' | xargs rm -rf", 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "wepy": { 14 | "module-a": false, 15 | "./src/components/list": "./src/components/wepy-list.wpy" 16 | }, 17 | "author": "Weiming ", 18 | "license": "MIT", 19 | "dependencies": { 20 | "wepy": "^1.7.2" 21 | }, 22 | "devDependencies": { 23 | "babel-eslint": "^7.2.3", 24 | "babel-plugin-transform-class-properties": "^6.24.1", 25 | "babel-plugin-transform-decorators-legacy": "^1.3.5", 26 | "babel-plugin-transform-export-extensions": "^6.22.0", 27 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 28 | "babel-preset-env": "^1.7.0", 29 | "cross-env": "^5.1.3", 30 | "eslint": "^4.18.2", 31 | "eslint-config-standard": "^7.1.0", 32 | "eslint-friendly-formatter": "^2.0.7", 33 | "eslint-plugin-html": "^2.0.3", 34 | "eslint-plugin-promise": "^3.8.0", 35 | "eslint-plugin-standard": "^2.3.1", 36 | "less": "^3.9.0", 37 | "wepy-async-function": "^1.4.7", 38 | "wepy-com-toast": "^1.0.2", 39 | "wepy-compiler-babel": "^1.5.3", 40 | "wepy-compiler-less": "^1.3.14", 41 | "wepy-eslint": "^1.5.4" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn wepy by building wepy-mall", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": false, 6 | "postcss": false, 7 | "minified": false 8 | }, 9 | "compileType": "miniprogram", 10 | "appid": "wxc4dbee764f033e20", 11 | "projectname": "fashion-mall", 12 | "miniprogramRoot": "./dist" 13 | } 14 | -------------------------------------------------------------------------------- /screenshots/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/screenshots/1.jpeg -------------------------------------------------------------------------------- /screenshots/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/screenshots/2.jpeg -------------------------------------------------------------------------------- /screenshots/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/screenshots/3.jpeg -------------------------------------------------------------------------------- /screenshots/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/screenshots/4.jpeg -------------------------------------------------------------------------------- /screenshots/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/screenshots/5.jpeg -------------------------------------------------------------------------------- /screenshots/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/screenshots/6.jpeg -------------------------------------------------------------------------------- /src/api/api.js: -------------------------------------------------------------------------------- 1 | import { wxRequest } from '@/utils/wxRequest'; 2 | 3 | let env = "-test" //-dev 或者 -test 4 | // const apiMall = 'https://sujiefs.com/' 5 | const apiMall = 'http://localhost:5000' 6 | 7 | //微信的jscode换取sessionKey 8 | const wxJsCode2Session = (params) => wxRequest(params, apiMall + "/api/wechat/jscode2session"); 9 | 10 | //用户是否绑定手机号 11 | const getUserInfo = (params) => wxRequest(params, apiMall + '/api/userCenter/getUserInfo'); 12 | 13 | 14 | //商品接口 15 | //首页发现商品接口 16 | const getHomeDisvocerList = (params) => wxRequest(params, apiMall + '/api/mall/discoverList'); 17 | //查询广告列表 18 | const getAdList = (params) => wxRequest(params, apiMall + '/api/adverts/list'); 19 | //广告商品列表 20 | const getAdGoodsList = (params) => wxRequest(params, apiMall + '/api/home/hostGoodsList'); 21 | //查询商品列表 22 | const getGoodsList = (params) => wxRequest(params, apiMall + '/api/mall/searchGoodsList'); 23 | //查询商品详情信息 24 | const getGoodsDetail = (params) => wxRequest(params, apiMall + '/api/mall/goods'); 25 | //商品收藏 26 | const favoriteGoods = (params) => wxRequest(params, apiMall + '/api/mall/goodsFavorite/add'); 27 | //商品收藏删除 28 | const unfavoriteGoods = (params) => wxRequest(params, apiMall + '/api/mall/goodsFavorite/delete'); 29 | //商品是否已收藏 30 | const isGoodsFavorite = (params) => wxRequest(params, apiMall + '/api/mall/goodsFavorite/goodsIsFavorite'); 31 | 32 | // 购物车 33 | // 加入购物车 34 | const addToCart = (params) => wxRequest(params, apiMall + '/api/mall/goodsCart/add'); 35 | 36 | //一级分类 37 | const getRootCategoryList = (params) => wxRequest(params, apiMall + '/api/mall/rootCtegoryList'); 38 | //二级三级分类 39 | const getChildCategoryList = (params) => wxRequest(params, apiMall + '/api/mall/childGoodsCatetoryList'); 40 | 41 | //查询关键字保存 42 | const addSearchKeyword = (params) => wxRequest(params, apiMall + '/api/searchkeyword/add'); 43 | //查询关键字列表 44 | const getSearchKeywordList = (params) => wxRequest(params, apiMall + '/api/searchkeyword/list'); 45 | //查询关键字清除 46 | const clearSearchKeyword = (params) => wxRequest(params, apiMall + '/api/searchkeyword/clear'); 47 | 48 | 49 | export default { 50 | wxJsCode2Session, 51 | getUserInfo, 52 | getHomeDisvocerList, 53 | getAdList, 54 | getAdGoodsList, 55 | getGoodsList, 56 | getGoodsDetail, 57 | favoriteGoods, 58 | unfavoriteGoods, 59 | isGoodsFavorite, 60 | getRootCategoryList, 61 | getChildCategoryList, 62 | addToCart, 63 | addSearchKeyword, 64 | getSearchKeywordList, 65 | clearSearchKeyword 66 | } 67 | -------------------------------------------------------------------------------- /src/app.wpy: -------------------------------------------------------------------------------- 1 | 95 | 100 | -------------------------------------------------------------------------------- /src/components/comment_list.wpy: -------------------------------------------------------------------------------- 1 | 27 | 49 | 107 | -------------------------------------------------------------------------------- /src/components/common/bottom_load_more.wpy: -------------------------------------------------------------------------------- 1 | 7 | 21 | 41 | -------------------------------------------------------------------------------- /src/components/common/placeholder.wpy: -------------------------------------------------------------------------------- 1 | 7 | 22 | 48 | -------------------------------------------------------------------------------- /src/components/discover.wpy: -------------------------------------------------------------------------------- 1 | 19 | 42 | 93 | -------------------------------------------------------------------------------- /src/components/filter_bar.wpy: -------------------------------------------------------------------------------- 1 | 21 | 22 | 88 | 89 | 155 | -------------------------------------------------------------------------------- /src/components/filter_slider.wpy: -------------------------------------------------------------------------------- 1 | 16 | 17 | 44 | 45 | 112 | -------------------------------------------------------------------------------- /src/components/rate.wpy: -------------------------------------------------------------------------------- 1 | 14 | 62 | 84 | -------------------------------------------------------------------------------- /src/components/search.wpy: -------------------------------------------------------------------------------- 1 | 15 | 52 | 104 | -------------------------------------------------------------------------------- /src/components/shop_grid_list.wpy: -------------------------------------------------------------------------------- 1 | 2 | 22 | 41 | 113 | -------------------------------------------------------------------------------- /src/images/alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/alert.png -------------------------------------------------------------------------------- /src/images/authorize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/authorize.png -------------------------------------------------------------------------------- /src/images/empty_cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/empty_cart.png -------------------------------------------------------------------------------- /src/images/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/error.png -------------------------------------------------------------------------------- /src/images/icon_cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/icon_cart.png -------------------------------------------------------------------------------- /src/images/icon_cart_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/icon_cart_active.png -------------------------------------------------------------------------------- /src/images/icon_category.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/icon_category.png -------------------------------------------------------------------------------- /src/images/icon_category_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/icon_category_active.png -------------------------------------------------------------------------------- /src/images/icon_home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/icon_home.png -------------------------------------------------------------------------------- /src/images/icon_home_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/icon_home_active.png -------------------------------------------------------------------------------- /src/images/icon_info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/icon_info.png -------------------------------------------------------------------------------- /src/images/icon_info_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/icon_info_active.png -------------------------------------------------------------------------------- /src/images/info/icon_my_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/info/icon_my_01.png -------------------------------------------------------------------------------- /src/images/info/icon_my_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/info/icon_my_02.png -------------------------------------------------------------------------------- /src/images/info/icon_my_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/info/icon_my_03.png -------------------------------------------------------------------------------- /src/images/info/icon_my_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/info/icon_my_04.png -------------------------------------------------------------------------------- /src/images/info/icon_my_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/info/icon_my_05.png -------------------------------------------------------------------------------- /src/images/info/icon_my_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/info/icon_my_06.png -------------------------------------------------------------------------------- /src/images/info/icon_my_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/info/icon_my_07.png -------------------------------------------------------------------------------- /src/images/loadding.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/loadding.gif -------------------------------------------------------------------------------- /src/images/nav/icon_nav_01_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/nav/icon_nav_01_new.png -------------------------------------------------------------------------------- /src/images/nav/icon_nav_02_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/nav/icon_nav_02_new.png -------------------------------------------------------------------------------- /src/images/nav/icon_nav_03_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/nav/icon_nav_03_new.png -------------------------------------------------------------------------------- /src/images/nav/icon_nav_04_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/nav/icon_nav_04_new.png -------------------------------------------------------------------------------- /src/images/rate/half.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/rate/half.png -------------------------------------------------------------------------------- /src/images/rate/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/rate/normal.png -------------------------------------------------------------------------------- /src/images/rate/selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weimingwill/fashion-mall/242dc85ab237e2e0579896855eb3510fb7c645be/src/images/rate/selected.png -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 转 WEB DEMO 11 | 14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/pages/authorization.wpy: -------------------------------------------------------------------------------- 1 | 13 | 100 | 128 | -------------------------------------------------------------------------------- /src/pages/cart.wpy: -------------------------------------------------------------------------------- 1 | 14 | 15 | 47 | 102 | -------------------------------------------------------------------------------- /src/pages/category.wpy: -------------------------------------------------------------------------------- 1 | 42 | 43 | 132 | 197 | -------------------------------------------------------------------------------- /src/pages/goods_detail.wpy: -------------------------------------------------------------------------------- 1 | 180 | 552 | 936 | -------------------------------------------------------------------------------- /src/pages/home.wpy: -------------------------------------------------------------------------------- 1 | 43 | 44 | 168 | 217 | -------------------------------------------------------------------------------- /src/pages/home_detail.wpy: -------------------------------------------------------------------------------- 1 | 28 | 139 | 172 | -------------------------------------------------------------------------------- /src/pages/info.wpy: -------------------------------------------------------------------------------- 1 | 44 | 45 | 141 | 211 | -------------------------------------------------------------------------------- /src/pages/search.wpy: -------------------------------------------------------------------------------- 1 | 26 | 27 | 251 | 252 | 295 | -------------------------------------------------------------------------------- /src/plugins/wxParse/html2json.js: -------------------------------------------------------------------------------- 1 | /** 2 | * html2Json 改造来自: https://github.com/Jxck/html2json 3 | * 4 | * 5 | * author: Di (微信小程序开发工程师) 6 | * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com) 7 | * 垂直微信小程序开发交流社区 8 | * 9 | * github地址: https://github.com/icindy/wxParse 10 | * 11 | * for: 微信小程序富文本解析 12 | * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184 13 | */ 14 | 15 | var __placeImgeUrlHttps = "https"; 16 | var __emojisReg = ''; 17 | var __emojisBaseSrc = ''; 18 | var __emojis = {}; 19 | var wxDiscode = require('./wxDiscode.js'); 20 | var HTMLParser = require('./htmlparser.js'); 21 | // Empty Elements - HTML 5 22 | var empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr"); 23 | // Block Elements - HTML 5 24 | var block = makeMap("br,a,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video"); 25 | 26 | // Inline Elements - HTML 5 27 | var inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var"); 28 | 29 | // Elements that you can, intentionally, leave open 30 | // (and which close themselves) 31 | var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr"); 32 | 33 | // Attributes that have their values filled in disabled="disabled" 34 | var fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected"); 35 | 36 | // Special Elements (can contain anything) 37 | var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block"); 38 | function makeMap(str) { 39 | var obj = {}, items = str.split(","); 40 | for (var i = 0; i < items.length; i++) 41 | obj[items[i]] = true; 42 | return obj; 43 | } 44 | 45 | function q(v) { 46 | return '"' + v + '"'; 47 | } 48 | 49 | function removeDOCTYPE(html) { 50 | return html 51 | .replace(/<\?xml.*\?>\n/, '') 52 | .replace(/<.*!doctype.*\>\n/, '') 53 | .replace(/<.*!DOCTYPE.*\>\n/, ''); 54 | } 55 | 56 | function trimHtml(html) { 57 | return html 58 | .replace(/\n+/g, '') 59 | .replace(//ig, '') 60 | .replace(/\/\*.*?\*\//ig, '') 61 | .replace(/[ ]+ 189 | // add to parents 190 | var parent = bufArray[0] || results; 191 | if (parent.nodes === undefined) { 192 | parent.nodes = []; 193 | } 194 | parent.nodes.push(node); 195 | } else { 196 | bufArray.unshift(node); 197 | } 198 | }, 199 | end: function (tag) { 200 | //debug(tag); 201 | // merge into parent tag 202 | var node = bufArray.shift(); 203 | if (node.tag !== tag) console.error('invalid state: mismatch end tag'); 204 | 205 | //当有缓存source资源时于于video补上src资源 206 | if(node.tag === 'video' && results.source){ 207 | node.attr.src = results.source; 208 | delete result.source; 209 | } 210 | 211 | if (bufArray.length === 0) { 212 | results.nodes.push(node); 213 | } else { 214 | var parent = bufArray[0]; 215 | if (parent.nodes === undefined) { 216 | parent.nodes = []; 217 | } 218 | parent.nodes.push(node); 219 | } 220 | }, 221 | chars: function (text) { 222 | //debug(text); 223 | var node = { 224 | node: 'text', 225 | text: text, 226 | textArray:transEmojiStr(text) 227 | }; 228 | 229 | if (bufArray.length === 0) { 230 | results.nodes.push(node); 231 | } else { 232 | var parent = bufArray[0]; 233 | if (parent.nodes === undefined) { 234 | parent.nodes = []; 235 | } 236 | node.index = parent.index + '.' + parent.nodes.length 237 | parent.nodes.push(node); 238 | } 239 | }, 240 | comment: function (text) { 241 | //debug(text); 242 | // var node = { 243 | // node: 'comment', 244 | // text: text, 245 | // }; 246 | // var parent = bufArray[0]; 247 | // if (parent.nodes === undefined) { 248 | // parent.nodes = []; 249 | // } 250 | // parent.nodes.push(node); 251 | }, 252 | }); 253 | return results; 254 | }; 255 | 256 | function transEmojiStr(str){ 257 | // var eReg = new RegExp("["+__reg+' '+"]"); 258 | // str = str.replace(/\[([^\[\]]+)\]/g,':$1:') 259 | 260 | var emojiObjs = []; 261 | //如果正则表达式为空 262 | if(__emojisReg.length == 0 || !__emojis){ 263 | var emojiObj = {} 264 | emojiObj.node = "text"; 265 | emojiObj.text = str; 266 | array = [emojiObj]; 267 | return array; 268 | } 269 | //这个地方需要调整 270 | str = str.replace(/\[([^\[\]]+)\]/g,':$1:') 271 | var eReg = new RegExp("[:]"); 272 | var array = str.split(eReg); 273 | for(var i = 0; i < array.length; i++){ 274 | var ele = array[i]; 275 | var emojiObj = {}; 276 | if(__emojis[ele]){ 277 | emojiObj.node = "element"; 278 | emojiObj.tag = "emoji"; 279 | emojiObj.text = __emojis[ele]; 280 | emojiObj.baseSrc= __emojisBaseSrc; 281 | }else{ 282 | emojiObj.node = "text"; 283 | emojiObj.text = ele; 284 | } 285 | emojiObjs.push(emojiObj); 286 | } 287 | 288 | return emojiObjs; 289 | } 290 | 291 | function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){ 292 | __emojisReg = reg; 293 | __emojisBaseSrc=baseSrc; 294 | __emojis=emojis; 295 | } 296 | 297 | module.exports = { 298 | html2json: html2json, 299 | emojisInit:emojisInit 300 | }; 301 | 302 | -------------------------------------------------------------------------------- /src/plugins/wxParse/htmlparser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * htmlParser改造自: https://github.com/blowsie/Pure-JavaScript-HTML5-Parser 4 | * 5 | * author: Di (微信小程序开发工程师) 6 | * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com) 7 | * 垂直微信小程序开发交流社区 8 | * 9 | * github地址: https://github.com/icindy/wxParse 10 | * 11 | * for: 微信小程序富文本解析 12 | * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184 13 | */ 14 | // Regular Expressions for parsing tags and attributes 15 | var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/, 16 | endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/, 17 | attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; 18 | 19 | // Empty Elements - HTML 5 20 | var empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr"); 21 | 22 | // Block Elements - HTML 5 23 | var block = makeMap("a,address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video"); 24 | 25 | // Inline Elements - HTML 5 26 | var inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var"); 27 | 28 | // Elements that you can, intentionally, leave open 29 | // (and which close themselves) 30 | var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr"); 31 | 32 | // Attributes that have their values filled in disabled="disabled" 33 | var fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected"); 34 | 35 | // Special Elements (can contain anything) 36 | var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block"); 37 | 38 | function HTMLParser(html, handler) { 39 | var index, chars, match, stack = [], last = html; 40 | stack.last = function () { 41 | return this[this.length - 1]; 42 | }; 43 | 44 | while (html) { 45 | chars = true; 46 | 47 | // Make sure we're not in a script or style element 48 | if (!stack.last() || !special[stack.last()]) { 49 | 50 | // Comment 51 | if (html.indexOf(""); 53 | 54 | if (index >= 0) { 55 | if (handler.comment) 56 | handler.comment(html.substring(4, index)); 57 | html = html.substring(index + 3); 58 | chars = false; 59 | } 60 | 61 | // end tag 62 | } else if (html.indexOf("]*>"), function (all, text) { 100 | text = text.replace(/|/g, "$1$2"); 101 | if (handler.chars) 102 | handler.chars(text); 103 | 104 | return ""; 105 | }); 106 | 107 | 108 | parseEndTag("", stack.last()); 109 | } 110 | 111 | if (html == last) 112 | throw "Parse Error: " + html; 113 | last = html; 114 | } 115 | 116 | // Clean up any remaining tags 117 | parseEndTag(); 118 | 119 | function parseStartTag(tag, tagName, rest, unary) { 120 | tagName = tagName.toLowerCase(); 121 | 122 | if (block[tagName]) { 123 | while (stack.last() && inline[stack.last()]) { 124 | parseEndTag("", stack.last()); 125 | } 126 | } 127 | 128 | if (closeSelf[tagName] && stack.last() == tagName) { 129 | parseEndTag("", tagName); 130 | } 131 | 132 | unary = empty[tagName] || !!unary; 133 | 134 | if (!unary) 135 | stack.push(tagName); 136 | 137 | if (handler.start) { 138 | var attrs = []; 139 | 140 | rest.replace(attr, function (match, name) { 141 | var value = arguments[2] ? arguments[2] : 142 | arguments[3] ? arguments[3] : 143 | arguments[4] ? arguments[4] : 144 | fillAttrs[name] ? name : ""; 145 | 146 | attrs.push({ 147 | name: name, 148 | value: value, 149 | escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //" 150 | }); 151 | }); 152 | 153 | if (handler.start) { 154 | handler.start(tagName, attrs, unary); 155 | } 156 | 157 | } 158 | } 159 | 160 | function parseEndTag(tag, tagName) { 161 | // If no tag name is provided, clean shop 162 | if (!tagName) 163 | var pos = 0; 164 | 165 | // Find the closest opened tag of the same type 166 | else { 167 | tagName = tagName.toLowerCase(); 168 | for (var pos = stack.length - 1; pos >= 0; pos--) 169 | if (stack[pos] == tagName) 170 | break; 171 | } 172 | if (pos >= 0) { 173 | // Close all the open elements, up the stack 174 | for (var i = stack.length - 1; i >= pos; i--) 175 | if (handler.end) 176 | handler.end(stack[i]); 177 | 178 | // Remove the open elements from the stack 179 | stack.length = pos; 180 | } 181 | } 182 | }; 183 | 184 | 185 | function makeMap(str) { 186 | var obj = {}, items = str.split(","); 187 | for (var i = 0; i < items.length; i++) 188 | obj[items[i]] = true; 189 | return obj; 190 | } 191 | 192 | module.exports = HTMLParser; 193 | -------------------------------------------------------------------------------- /src/plugins/wxParse/wxDiscode.js: -------------------------------------------------------------------------------- 1 | // HTML 支持的数学符号 2 | function strNumDiscode(str){ 3 | str = str.replace(/∀/g, '∀'); 4 | str = str.replace(/∂/g, '∂'); 5 | str = str.replace(/&exists;/g, '∃'); 6 | str = str.replace(/∅/g, '∅'); 7 | str = str.replace(/∇/g, '∇'); 8 | str = str.replace(/∈/g, '∈'); 9 | str = str.replace(/∉/g, '∉'); 10 | str = str.replace(/∋/g, '∋'); 11 | str = str.replace(/∏/g, '∏'); 12 | str = str.replace(/∑/g, '∑'); 13 | str = str.replace(/−/g, '−'); 14 | str = str.replace(/∗/g, '∗'); 15 | str = str.replace(/√/g, '√'); 16 | str = str.replace(/∝/g, '∝'); 17 | str = str.replace(/∞/g, '∞'); 18 | str = str.replace(/∠/g, '∠'); 19 | str = str.replace(/∧/g, '∧'); 20 | str = str.replace(/∨/g, '∨'); 21 | str = str.replace(/∩/g, '∩'); 22 | str = str.replace(/∩/g, '∪'); 23 | str = str.replace(/∫/g, '∫'); 24 | str = str.replace(/∴/g, '∴'); 25 | str = str.replace(/∼/g, '∼'); 26 | str = str.replace(/≅/g, '≅'); 27 | str = str.replace(/≈/g, '≈'); 28 | str = str.replace(/≠/g, '≠'); 29 | str = str.replace(/≤/g, '≤'); 30 | str = str.replace(/≥/g, '≥'); 31 | str = str.replace(/⊂/g, '⊂'); 32 | str = str.replace(/⊃/g, '⊃'); 33 | str = str.replace(/⊄/g, '⊄'); 34 | str = str.replace(/⊆/g, '⊆'); 35 | str = str.replace(/⊇/g, '⊇'); 36 | str = str.replace(/⊕/g, '⊕'); 37 | str = str.replace(/⊗/g, '⊗'); 38 | str = str.replace(/⊥/g, '⊥'); 39 | str = str.replace(/⋅/g, '⋅'); 40 | return str; 41 | } 42 | 43 | //HTML 支持的希腊字母 44 | function strGreeceDiscode(str){ 45 | str = str.replace(/Α/g, 'Α'); 46 | str = str.replace(/Β/g, 'Β'); 47 | str = str.replace(/Γ/g, 'Γ'); 48 | str = str.replace(/Δ/g, 'Δ'); 49 | str = str.replace(/Ε/g, 'Ε'); 50 | str = str.replace(/Ζ/g, 'Ζ'); 51 | str = str.replace(/Η/g, 'Η'); 52 | str = str.replace(/Θ/g, 'Θ'); 53 | str = str.replace(/Ι/g, 'Ι'); 54 | str = str.replace(/Κ/g, 'Κ'); 55 | str = str.replace(/Λ/g, 'Λ'); 56 | str = str.replace(/Μ/g, 'Μ'); 57 | str = str.replace(/Ν/g, 'Ν'); 58 | str = str.replace(/Ξ/g, 'Ν'); 59 | str = str.replace(/Ο/g, 'Ο'); 60 | str = str.replace(/Π/g, 'Π'); 61 | str = str.replace(/Ρ/g, 'Ρ'); 62 | str = str.replace(/Σ/g, 'Σ'); 63 | str = str.replace(/Τ/g, 'Τ'); 64 | str = str.replace(/Υ/g, 'Υ'); 65 | str = str.replace(/Φ/g, 'Φ'); 66 | str = str.replace(/Χ/g, 'Χ'); 67 | str = str.replace(/Ψ/g, 'Ψ'); 68 | str = str.replace(/Ω/g, 'Ω'); 69 | 70 | str = str.replace(/α/g, 'α'); 71 | str = str.replace(/β/g, 'β'); 72 | str = str.replace(/γ/g, 'γ'); 73 | str = str.replace(/δ/g, 'δ'); 74 | str = str.replace(/ε/g, 'ε'); 75 | str = str.replace(/ζ/g, 'ζ'); 76 | str = str.replace(/η/g, 'η'); 77 | str = str.replace(/θ/g, 'θ'); 78 | str = str.replace(/ι/g, 'ι'); 79 | str = str.replace(/κ/g, 'κ'); 80 | str = str.replace(/λ/g, 'λ'); 81 | str = str.replace(/μ/g, 'μ'); 82 | str = str.replace(/ν/g, 'ν'); 83 | str = str.replace(/ξ/g, 'ξ'); 84 | str = str.replace(/ο/g, 'ο'); 85 | str = str.replace(/π/g, 'π'); 86 | str = str.replace(/ρ/g, 'ρ'); 87 | str = str.replace(/ς/g, 'ς'); 88 | str = str.replace(/σ/g, 'σ'); 89 | str = str.replace(/τ/g, 'τ'); 90 | str = str.replace(/υ/g, 'υ'); 91 | str = str.replace(/φ/g, 'φ'); 92 | str = str.replace(/χ/g, 'χ'); 93 | str = str.replace(/ψ/g, 'ψ'); 94 | str = str.replace(/ω/g, 'ω'); 95 | str = str.replace(/ϑ/g, 'ϑ'); 96 | str = str.replace(/ϒ/g, 'ϒ'); 97 | str = str.replace(/ϖ/g, 'ϖ'); 98 | str = str.replace(/·/g, '·'); 99 | return str; 100 | } 101 | 102 | // 103 | 104 | function strcharacterDiscode(str){ 105 | // 加入常用解析 106 | str = str.replace(/ /g, ' '); 107 | str = str.replace(/"/g, "'"); 108 | str = str.replace(/&/g, '&'); 109 | // str = str.replace(/</g, '‹'); 110 | // str = str.replace(/>/g, '›'); 111 | 112 | str = str.replace(/</g, '<'); 113 | str = str.replace(/>/g, '>'); 114 | str = str.replace(/•/g, '•'); 115 | 116 | return str; 117 | } 118 | 119 | // HTML 支持的其他实体 120 | function strOtherDiscode(str){ 121 | str = str.replace(/Œ/g, 'Œ'); 122 | str = str.replace(/œ/g, 'œ'); 123 | str = str.replace(/Š/g, 'Š'); 124 | str = str.replace(/š/g, 'š'); 125 | str = str.replace(/Ÿ/g, 'Ÿ'); 126 | str = str.replace(/ƒ/g, 'ƒ'); 127 | str = str.replace(/ˆ/g, 'ˆ'); 128 | str = str.replace(/˜/g, '˜'); 129 | str = str.replace(/ /g, ''); 130 | str = str.replace(/ /g, ''); 131 | str = str.replace(/ /g, ''); 132 | str = str.replace(/‌/g, ''); 133 | str = str.replace(/‍/g, ''); 134 | str = str.replace(/‎/g, ''); 135 | str = str.replace(/‏/g, ''); 136 | str = str.replace(/–/g, '–'); 137 | str = str.replace(/—/g, '—'); 138 | str = str.replace(/‘/g, '‘'); 139 | str = str.replace(/’/g, '’'); 140 | str = str.replace(/‚/g, '‚'); 141 | str = str.replace(/“/g, '“'); 142 | str = str.replace(/”/g, '”'); 143 | str = str.replace(/„/g, '„'); 144 | str = str.replace(/†/g, '†'); 145 | str = str.replace(/‡/g, '‡'); 146 | str = str.replace(/•/g, '•'); 147 | str = str.replace(/…/g, '…'); 148 | str = str.replace(/‰/g, '‰'); 149 | str = str.replace(/′/g, '′'); 150 | str = str.replace(/″/g, '″'); 151 | str = str.replace(/‹/g, '‹'); 152 | str = str.replace(/›/g, '›'); 153 | str = str.replace(/‾/g, '‾'); 154 | str = str.replace(/€/g, '€'); 155 | str = str.replace(/™/g, '™'); 156 | 157 | str = str.replace(/←/g, '←'); 158 | str = str.replace(/↑/g, '↑'); 159 | str = str.replace(/→/g, '→'); 160 | str = str.replace(/↓/g, '↓'); 161 | str = str.replace(/↔/g, '↔'); 162 | str = str.replace(/↵/g, '↵'); 163 | str = str.replace(/⌈/g, '⌈'); 164 | str = str.replace(/⌉/g, '⌉'); 165 | 166 | str = str.replace(/⌊/g, '⌊'); 167 | str = str.replace(/⌋/g, '⌋'); 168 | str = str.replace(/◊/g, '◊'); 169 | str = str.replace(/♠/g, '♠'); 170 | str = str.replace(/♣/g, '♣'); 171 | str = str.replace(/♥/g, '♥'); 172 | 173 | str = str.replace(/♦/g, '♦'); 174 | str = str.replace(/'/g, '\''); 175 | return str; 176 | } 177 | 178 | function strMoreDiscode(str){ 179 | str = str.replace(/\r\n/g,""); 180 | str = str.replace(/\n/g,""); 181 | 182 | str = str.replace(/code/g,"wxxxcode-style"); 183 | return str; 184 | } 185 | 186 | function strDiscode(str){ 187 | str = strNumDiscode(str); 188 | str = strGreeceDiscode(str); 189 | str = strcharacterDiscode(str); 190 | str = strOtherDiscode(str); 191 | str = strMoreDiscode(str); 192 | return str; 193 | } 194 | function urlToHttpUrl(url,rep){ 195 | 196 | var patt1 = new RegExp("^//"); 197 | var result = patt1.test(url); 198 | if(result){ 199 | url = rep+":"+url; 200 | } 201 | return url; 202 | } 203 | 204 | module.exports = { 205 | strDiscode:strDiscode, 206 | urlToHttpUrl:urlToHttpUrl 207 | } -------------------------------------------------------------------------------- /src/plugins/wxParse/wxParse.js: -------------------------------------------------------------------------------- 1 | /** 2 | * author: Di (微信小程序开发工程师) 3 | * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com) 4 | * 垂直微信小程序开发交流社区 5 | * 6 | * github地址: https://github.com/icindy/wxParse 7 | * 8 | * for: 微信小程序富文本解析 9 | * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184 10 | */ 11 | 12 | /** 13 | * utils函数引入 14 | **/ 15 | import showdown from './showdown.js'; 16 | import HtmlToJson from './html2json.js'; 17 | /** 18 | * 配置及公有属性 19 | **/ 20 | var realWindowWidth = 0; 21 | var realWindowHeight = 0; 22 | wx.getSystemInfo({ 23 | success: function (res) { 24 | realWindowWidth = res.windowWidth 25 | realWindowHeight = res.windowHeight 26 | } 27 | }) 28 | /** 29 | * 主函数入口区 30 | **/ 31 | function wxParse(bindName = 'wxParseData', type='html', data='
数据不能为空
', target,imagePadding) { 32 | var that = target; 33 | var transData = {};//存放转化后的数据 34 | if (type == 'html') { 35 | transData = HtmlToJson.html2json(data, bindName); 36 | } else if (type == 'md' || type == 'markdown') { 37 | var converter = new showdown.Converter(); 38 | var html = converter.makeHtml(data); 39 | transData = HtmlToJson.html2json(html, bindName); 40 | } 41 | transData.view = {}; 42 | transData.view.imagePadding = 0; 43 | if(typeof(imagePadding) != 'undefined'){ 44 | transData.view.imagePadding = imagePadding 45 | } 46 | var bindData = {}; 47 | bindData[bindName] = transData; 48 | that.setData(bindData) 49 | that.bindData = bindData // 增加这一行代码 50 | that.wxParseImgLoad = wxParseImgLoad; 51 | that.wxParseImgTap = wxParseImgTap; 52 | } 53 | // 图片点击事件 54 | function wxParseImgTap(e) { 55 | var that = this; 56 | var nowImgUrl = e.target.dataset.src; 57 | var tagFrom = e.target.dataset.from; 58 | if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) { 59 | wx.previewImage({ 60 | current: nowImgUrl, // 当前显示图片的http链接 61 | urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表 62 | }) 63 | } 64 | } 65 | 66 | /** 67 | * 图片视觉宽高计算函数区 68 | **/ 69 | function wxParseImgLoad(e) { 70 | var that = this; 71 | var tagFrom = e.target.dataset.from; 72 | var idx = e.target.dataset.idx; 73 | if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) { 74 | calMoreImageInfo(e, idx, that, tagFrom) 75 | } 76 | } 77 | // 假循环获取计算图片视觉最佳宽高 78 | function calMoreImageInfo(e, idx, that, bindName) { 79 | var temData = that.data[bindName]; 80 | if (!temData || temData.images.length == 0) { 81 | return; 82 | } 83 | var temImages = temData.images; 84 | //因为无法获取view宽度 需要自定义padding进行计算，稍后处理 85 | var recal = wxAutoImageCal(e.detail.width, e.detail.height,that,bindName); 86 | // temImages[idx].width = recal.imageWidth; 87 | // temImages[idx].height = recal.imageheight; 88 | // temData.images = temImages; 89 | // var bindData = {}; 90 | // bindData[bindName] = temData; 91 | // that.setData(bindData); 92 | var index = temImages[idx].index 93 | var key = `${bindName}` 94 | for (var i of index.split('.')) key+=`.nodes[${i}]` 95 | var keyW = key + '.width' 96 | var keyH = key + '.height' 97 | that.setData({ 98 | [keyW]: recal.imageWidth, 99 | [keyH]: recal.imageheight, 100 | }) 101 | } 102 | 103 | // 计算视觉优先的图片宽高 104 | function wxAutoImageCal(originalWidth, originalHeight,that,bindName) { 105 | //获取图片的原始长宽 106 | var windowWidth = 0, windowHeight = 0; 107 | var autoWidth = 0, autoHeight = 0; 108 | var results = {}; 109 | var padding = that.data[bindName].view.imagePadding; 110 | windowWidth = realWindowWidth-2*padding; 111 | windowHeight = realWindowHeight; 112 | //判断按照那种方式进行缩放 113 | if (originalWidth > windowWidth) {//在图片width大于手机屏幕width时候 114 | autoWidth = windowWidth; 115 | autoHeight = (autoWidth * originalHeight) / originalWidth; 116 | results.imageWidth = autoWidth; 117 | results.imageheight = autoHeight; 118 | } else {//否则展示原来的数据 119 | results.imageWidth = originalWidth; 120 | results.imageheight = originalHeight; 121 | } 122 | return results; 123 | } 124 | 125 | function wxParseTemArray(temArrayName,bindNameReg,total,that){ 126 | var array = []; 127 | var temData = that.data; 128 | var obj = null; 129 | for(var i = 0; i < total; i++){ 130 | var simArr = temData[bindNameReg+i].nodes; 131 | array.push(simArr); 132 | } 133 | 134 | temArrayName = temArrayName || 'wxParseTemArray'; 135 | obj = JSON.parse('{"'+ temArrayName +'":""}'); 136 | obj[temArrayName] = array; 137 | that.setData(obj); 138 | } 139 | 140 | /** 141 | * 配置emojis 142 | * 143 | */ 144 | 145 | function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){ 146 | HtmlToJson.emojisInit(reg,baseSrc,emojis); 147 | } 148 | 149 | module.exports = { 150 | wxParse: wxParse, 151 | wxParseTemArray:wxParseTemArray, 152 | emojisInit:emojisInit 153 | } 154 | -------------------------------------------------------------------------------- /src/plugins/wxParse/wxParse.wxml: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 19 | 20 | 24 | 25 | 35 | 36 | 39 | 40 | 41 |