├── src ├── app.css ├── pages │ └── index │ │ ├── index.css │ │ └── index.jsx ├── palette │ ├── sky.jpg │ ├── avatar.jpg │ ├── text-example.js │ ├── shadow-example.js │ ├── image-example.js │ └── card.js ├── app.jsx └── index.html ├── .gitignore ├── .npmignore ├── config ├── dev.js ├── prod.js └── index.js ├── .eslintrc ├── .editorconfig ├── README.md ├── project.config.json └── package.json /src/app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | .temp/ 3 | .rn_temp/ 4 | node_modules/ 5 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | deploy_versions/ 3 | .temp/ 4 | .rn_temp/ 5 | node_modules/ 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /src/pages/index/index.css: -------------------------------------------------------------------------------- 1 | .save-button { 2 | position: relative; 3 | margin-top: 40px; 4 | } 5 | -------------------------------------------------------------------------------- /src/palette/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manycore-maas/Taro-Painter-Demo/HEAD/src/palette/sky.jpg -------------------------------------------------------------------------------- /src/palette/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manycore-maas/Taro-Painter-Demo/HEAD/src/palette/avatar.jpg -------------------------------------------------------------------------------- /config/dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"development"' 4 | }, 5 | defineConstants: { 6 | }, 7 | weapp: {}, 8 | h5: {} 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["taro"], 3 | "rules": { 4 | "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }], 5 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }] 6 | }, 7 | "parser": "babel-eslint" 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /config/prod.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"production"' 4 | }, 5 | defineConstants: { 6 | }, 7 | weapp: {}, 8 | h5: { 9 | /** 10 | * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。 11 | * 参考代码如下： 12 | * webpackChain (chain) { 13 | * chain.plugin('analyzer') 14 | * .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []) 15 | * } 16 | */ 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Taro-Painter-Demo 2 | 3 | 如何在 taro 框架中使用 Painter 的 Demo 4 | 5 | painter 已发布基于 taro2.x 的 npm 包，因此不再需要使用 submodule 引入原生组件的方式 6 | 7 | 如何引入包： 8 | 9 | ```powershell 10 | npm i mina-painter 11 | ``` 12 | 13 | 或 14 | 15 | ```powershell 16 | yarn add mina-painter 17 | ``` 18 | 19 | 如何使用组件： 20 | 21 | ```jsx 22 | import Painter from 'mina-painter' 23 | 24 | ... 25 | 26 | 30 | ``` 31 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "miniprogramRoot": "dist/", 3 | "projectname": "Taro-Painter-Demo", 4 | "description": "演示如何在taro框架中使用Painter", 5 | "appid": "touristappid", 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": false, 9 | "postcss": false, 10 | "minified": false, 11 | "newFeature": true, 12 | "coverView": true, 13 | "autoAudits": false, 14 | "showShadowRootInWxmlPanel": false, 15 | "scopeDataCheck": false, 16 | "checkInvalidKey": true, 17 | "checkSiteMap": true, 18 | "uploadWithSourceMap": true, 19 | "babelSetting": { 20 | "ignore": [], 21 | "disablePlugins": [], 22 | "outputPath": "" 23 | }, 24 | "useCompilerModule": false 25 | }, 26 | "compileType": "miniprogram", 27 | "simulatorType": "wechat", 28 | "simulatorPluginLibVersion": {}, 29 | "condition": {} 30 | } -------------------------------------------------------------------------------- /src/palette/text-example.js: -------------------------------------------------------------------------------- 1 | const text = '锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦'; 2 | export default class ImageExample { 3 | palette() { 4 | const views = []; 5 | let tmpText = ''; 6 | let index = 0; 7 | for (let i = 0; i < text.length; i++) { 8 | tmpText = `${tmpText}${text[i]}\n`; 9 | if (i % 5 === 4) { 10 | views.push({ 11 | type: 'text', 12 | text: tmpText, 13 | css: { 14 | right: `${50 + index}rpx`, 15 | top: '60rpx', 16 | fontSize: '40rpx', 17 | lineHeight: '50rpx', 18 | }, 19 | }); 20 | index += 50; 21 | tmpText = ''; 22 | } 23 | } 24 | return ({ 25 | width: '654rpx', 26 | height: '500rpx', 27 | background: '#eee', 28 | views: views, 29 | }); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app.jsx: -------------------------------------------------------------------------------- 1 | import Taro, { Component } from '@tarojs/taro' 2 | import Index from './pages/index' 3 | 4 | import './app.css' 5 | 6 | // 如果需要在 h5 环境中开启 React Devtools 7 | // 取消以下注释： 8 | // if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') { 9 | // require('nerv-devtools') 10 | // } 11 | 12 | class App extends Component { 13 | 14 | config = { 15 | pages: [ 16 | 'pages/index/index' 17 | ], 18 | window: { 19 | backgroundTextStyle: 'light', 20 | navigationBarBackgroundColor: '#fff', 21 | navigationBarTitleText: 'WeChat', 22 | navigationBarTextStyle: 'black' 23 | } 24 | } 25 | 26 | componentDidMount () {} 27 | 28 | componentDidShow () {} 29 | 30 | componentDidHide () {} 31 | 32 | componentDidCatchError () {} 33 | 34 | // 在 App 类中的 render() 函数没有实际作用 35 | // 请勿修改此函数 36 | render () { 37 | return ( 38 | 39 | ) 40 | } 41 | } 42 | 43 | Taro.render(, document.getElementById('app')) 44 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /src/pages/index/index.jsx: -------------------------------------------------------------------------------- 1 | import Taro, { useEffect, useState } from "@tarojs/taro"; 2 | import { View, Button, Image } from "@tarojs/components"; 3 | import Card from "../../palette/card"; 4 | import Painter from "mina-painter"; 5 | import "./index.css"; 6 | 7 | const Index = () => { 8 | const [template, setTemplate] = useState(); 9 | const [imagePath, setImage] = useState(""); 10 | 11 | useEffect(() => { 12 | setTemplate(new Card().palette()); 13 | }, []); 14 | 15 | function onImgOK(path) { 16 | setImage(path); 17 | } 18 | 19 | function saveImage() { 20 | if (imagePath) { 21 | Taro.saveImageToPhotosAlbum({ 22 | filePath: imagePath, 23 | }); 24 | } 25 | } 26 | 27 | return ( 28 | 29 | 34 | 35 | 38 | 39 | ); 40 | }; 41 | 42 | Index.config = { 43 | navigationBarTitleText: "首页", 44 | }; 45 | -------------------------------------------------------------------------------- /src/palette/shadow-example.js: -------------------------------------------------------------------------------- 1 | import Sky from './sky.jpg' 2 | export default class ShadowExample { 3 | palette() { 4 | return ({ 5 | width: '654rpx', 6 | height: '400rpx', 7 | background: '#eee', 8 | views: [{ 9 | type: 'image', 10 | url: Sky, 11 | css: { 12 | shadow: '10rpx 10rpx 5rpx #888888', 13 | }, 14 | }, 15 | { 16 | type: 'rect', 17 | css: { 18 | width: '250rpx', 19 | height: '150rpx', 20 | right: '50rpx', 21 | top: '60rpx', 22 | shadow: '-10rpx 10rpx 5rpx #888888', 23 | color: 'linear-gradient(-135deg, #fedcba 0%, rgba(18, 52, 86, 1) 20%, #987 80%)', 24 | }, 25 | }, 26 | { 27 | type: 'qrcode', 28 | content: 'https://github.com/Kujiale-Mobile/Painter', 29 | css: { 30 | top: '230rpx', 31 | width: '120rpx', 32 | height: '120rpx', 33 | shadow: '10rpx 10rpx 5rpx #888888', 34 | }, 35 | }, 36 | { 37 | type: 'text', 38 | text: "shadow: '10rpx 10rpx 5rpx #888888'", 39 | css: { 40 | left: '180rpx', 41 | fontSize: '30rpx', 42 | shadow: '10rpx 10rpx 5rpx #888888', 43 | top: '290rpx', 44 | }, 45 | }, 46 | ], 47 | }); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/palette/image-example.js: -------------------------------------------------------------------------------- 1 | import Sky from './sky.jpg' 2 | export default class ImageExample { 3 | palette() { 4 | return ({ 5 | width: '654rpx', 6 | height: '1000rpx', 7 | background: '#eee', 8 | views: [{ 9 | type: 'image', 10 | url: Sky, 11 | }, 12 | { 13 | type: 'text', 14 | text: '未设置height、width时', 15 | css: { 16 | right: '0rpx', 17 | top: '60rpx', 18 | fontSize: '30rpx', 19 | }, 20 | }, 21 | { 22 | type: 'image', 23 | url: Sky, 24 | css: { 25 | width: '200rpx', 26 | height: '200rpx', 27 | top: '230rpx', 28 | }, 29 | }, 30 | { 31 | type: 'text', 32 | text: "mode: 'aspectFill' 或 无", 33 | css: { 34 | left: '210rpx', 35 | fontSize: '30rpx', 36 | top: '290rpx', 37 | }, 38 | }, 39 | { 40 | type: 'image', 41 | url: Sky, 42 | css: { 43 | width: '200rpx', 44 | height: '200rpx', 45 | mode: 'scaleToFill', 46 | top: '500rpx', 47 | }, 48 | }, 49 | { 50 | type: 'text', 51 | text: "mode: 'scaleToFill'", 52 | css: { 53 | left: '210rpx', 54 | top: '560rpx', 55 | fontSize: '30rpx', 56 | }, 57 | }, 58 | { 59 | type: 'image', 60 | url: Sky, 61 | css: { 62 | width: '200rpx', 63 | height: 'auto', 64 | top: '750rpx', 65 | }, 66 | }, 67 | { 68 | type: 'text', 69 | text: '设置height为auto', 70 | css: { 71 | left: '210rpx', 72 | top: '780rpx', 73 | fontSize: '30rpx', 74 | }, 75 | }, 76 | ], 77 | }); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | projectName: "test", 3 | date: "2020-10-13", 4 | designWidth: 750, 5 | deviceRatio: { 6 | 640: 2.34 / 2, 7 | 750: 1, 8 | 828: 1.81 / 2, 9 | }, 10 | sourceRoot: "src", 11 | outputRoot: "dist", 12 | babel: { 13 | sourceMap: true, 14 | presets: [ 15 | [ 16 | "env", 17 | { 18 | modules: false, 19 | }, 20 | ], 21 | ], 22 | plugins: [ 23 | "transform-decorators-legacy", 24 | "transform-class-properties", 25 | "transform-object-rest-spread", 26 | [ 27 | "transform-runtime", 28 | { 29 | helpers: false, 30 | polyfill: false, 31 | regenerator: true, 32 | moduleName: "babel-runtime", 33 | }, 34 | ], 35 | ], 36 | }, 37 | plugins: ["@tarojs/plugin-sass", "@tarojs/plugin-terser"], 38 | defineConstants: {}, 39 | mini: { 40 | imageUrlLoaderOption: { 41 | limit: false, // 大小限制，单位为 b 42 | }, 43 | postcss: { 44 | pxtransform: { 45 | enable: true, 46 | config: {}, 47 | }, 48 | url: { 49 | enable: true, 50 | config: { 51 | limit: 1, // 设定转换尺寸上限 52 | }, 53 | }, 54 | }, 55 | }, 56 | h5: { 57 | publicPath: "/", 58 | staticDirectory: "static", 59 | postcss: { 60 | autoprefixer: { 61 | enable: true, 62 | config: { 63 | browsers: ["last 3 versions", "Android >= 4.1", "ios >= 8"], 64 | }, 65 | }, 66 | cssModules: { 67 | enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true 68 | config: { 69 | namingPattern: "module", // 转换模式，取值为 global/module 70 | generateScopedName: "[name]__[local]___[hash:base64:5]", 71 | }, 72 | }, 73 | }, 74 | }, 75 | }; 76 | 77 | module.exports = function (merge) { 78 | if (process.env.NODE_ENV === "development") { 79 | return merge({}, config, require("./dev")); 80 | } 81 | return merge({}, config, require("./prod")); 82 | }; 83 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Taro-Painter-Demo", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "演示如何在taro框架中使用Painter", 6 | "templateInfo": { 7 | "name": "default", 8 | "typescript": false, 9 | "css": "none" 10 | }, 11 | "scripts": { 12 | "build:weapp": "taro build --type weapp", 13 | "build:swan": "taro build --type swan", 14 | "build:alipay": "taro build --type alipay", 15 | "build:tt": "taro build --type tt", 16 | "build:h5": "taro build --type h5", 17 | "build:rn": "taro build --type rn", 18 | "build:qq": "taro build --type qq", 19 | "build:quickapp": "taro build --type quickapp", 20 | "dev:weapp": "npm run build:weapp -- --watch", 21 | "dev:swan": "npm run build:swan -- --watch", 22 | "dev:alipay": "npm run build:alipay -- --watch", 23 | "dev:tt": "npm run build:tt -- --watch", 24 | "dev:h5": "npm run build:h5 -- --watch", 25 | "dev:rn": "npm run build:rn -- --watch", 26 | "dev:qq": "npm run build:qq -- --watch", 27 | "dev:quickapp": "npm run build:quickapp -- --watch" 28 | }, 29 | "author": "", 30 | "license": "MIT", 31 | "dependencies": { 32 | "@tarojs/components": "2.2.8", 33 | "@tarojs/mini-runner": "2.2.8", 34 | "@tarojs/router": "2.2.8", 35 | "@tarojs/taro": "2.2.8", 36 | "@tarojs/taro-alipay": "2.2.8", 37 | "@tarojs/taro-h5": "2.2.8", 38 | "@tarojs/taro-qq": "2.2.8", 39 | "@tarojs/taro-quickapp": "2.2.8", 40 | "@tarojs/taro-swan": "2.2.8", 41 | "@tarojs/taro-tt": "2.2.8", 42 | "@tarojs/taro-weapp": "2.2.8", 43 | "mina-painter": "^2.2.5", 44 | "nerv-devtools": "^1.5.7", 45 | "nervjs": "^1.5.7" 46 | }, 47 | "devDependencies": { 48 | "@tarojs/plugin-babel": "2.2.8", 49 | "@tarojs/plugin-csso": "2.2.8", 50 | "@tarojs/plugin-sass": "2.2.8", 51 | "@tarojs/plugin-terser": "2.2.8", 52 | "@tarojs/plugin-uglifyjs": "1.3.31", 53 | "@tarojs/webpack-runner": "2.2.8", 54 | "@types/react": "^16.4.6", 55 | "@types/webpack-env": "^1.13.6", 56 | "babel-eslint": "^8.2.3", 57 | "babel-plugin-transform-class-properties": "^6.24.1", 58 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 59 | "babel-plugin-transform-jsx-stylesheet": "^0.6.5", 60 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 61 | "babel-plugin-transform-runtime": "^6.23.0", 62 | "babel-preset-env": "^1.6.1", 63 | "eslint": "^5.16.0", 64 | "eslint-config-taro": "2.2.8", 65 | "eslint-plugin-import": "^2.12.0", 66 | "eslint-plugin-react": "^7.8.2", 67 | "eslint-plugin-taro": "2.2.8", 68 | "stylelint": "9.3.0", 69 | "stylelint-config-taro-rn": "2.2.8", 70 | "stylelint-taro-rn": "2.2.8" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/palette/card.js: -------------------------------------------------------------------------------- 1 | import Avatar from './avatar.jpg' 2 | export default class LastMayday { 3 | palette() { 4 | return ({ 5 | width: '654rpx', 6 | height: '1000rpx', 7 | background: '#eee', 8 | views: [ 9 | _textDecoration('overline', 0), 10 | _textDecoration('underline', 1), 11 | _textDecoration('line-through', 2), 12 | _textDecoration('overline underline line-through', 3, 'red'), 13 | { 14 | type: 'rect', 15 | css: { 16 | width: '200rpx', 17 | right: '20rpx', 18 | top: '30rpx', 19 | height: '100rpx', 20 | shadow: '10rpx 10rpx 5rpx #888888', 21 | color: 'linear-gradient(-135deg, #fedcba 0%, rgba(18, 52, 86, 1) 20%, #987 80%)', 22 | }, 23 | }, 24 | { 25 | id: 'my-text-id', 26 | type: 'text', 27 | text: "fontWeight: 'bold'", 28 | css: [{ 29 | top: `${startTop + 4 * gapSize}rpx`, 30 | shadow: '10rpx 10rpx 5rpx #888888', 31 | fontWeight: 'bold', 32 | }, common], 33 | }, 34 | { 35 | type: 'rect', 36 | css: { 37 | width: '20rpx', 38 | height: '20rpx', 39 | color: 'red', 40 | left: [`${startTop}rpx`, 'my-text-id'], 41 | top: `${startTop + 4 * gapSize + 15}rpx`, 42 | }, 43 | }, 44 | { 45 | type: 'text', 46 | text: '我是把width设置为400rpx后，我就换行了xx行了', 47 | css: [{ 48 | top: `${startTop + 5 * gapSize}rpx`, 49 | align: 'center', 50 | width: '400rpx', 51 | background: '#538e60', 52 | textAlign: 'center', 53 | padding: '10rpx', 54 | }, common, { 55 | left: '300rpx' 56 | }], 57 | }, 58 | { 59 | type: 'text', 60 | text: '我设置了maxLines为1，看看会产生什么效果', 61 | css: [{ 62 | top: `${startTop + 7 * gapSize}rpx`, 63 | width: '500rpx', 64 | maxLines: 1, 65 | }, common], 66 | }, 67 | _image(0), 68 | _des(0, '普通'), 69 | _image(1, 30), 70 | _des(1, 'rotate: 30'), 71 | _image(2, 30, '20rpx'), 72 | _des(2, 'borderRadius: 30rpx'), 73 | _image(3, 0, '60rpx'), 74 | _des(3, '圆形'), 75 | { 76 | type: 'image', 77 | url: Avatar, 78 | css: { 79 | bottom: '40rpx', 80 | left: '40rpx', 81 | borderRadius: '50rpx', 82 | borderWidth: '10rpx', 83 | borderColor: 'yellow', 84 | width: '100rpx', 85 | height: '100rpx', 86 | }, 87 | }, 88 | { 89 | type: 'qrcode', 90 | content: 'https://github.com/Kujiale-Mobile/Painter', 91 | css: { 92 | bottom: '40rpx', 93 | left: '180rpx', 94 | color: 'red', 95 | borderWidth: '10rpx', 96 | borderColor: 'blue', 97 | width: '120rpx', 98 | height: '120rpx', 99 | }, 100 | }, 101 | { 102 | type: 'rect', 103 | css: { 104 | bottom: '40rpx', 105 | right: '40rpx', 106 | color: 'radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)', 107 | borderRadius: '20rpx', 108 | borderWidth: '10rpx', 109 | width: '120rpx', 110 | height: '120rpx', 111 | }, 112 | }, 113 | { 114 | type: 'text', 115 | text: 'borderWidth', 116 | css: { 117 | bottom: '40rpx', 118 | right: '200rpx', 119 | color: 'green', 120 | borderWidth: '2rpx', 121 | }, 122 | }, 123 | ], 124 | }); 125 | } 126 | } 127 | 128 | const startTop = 50; 129 | const startLeft = 20; 130 | const gapSize = 70; 131 | const common = { 132 | left: `${startLeft}rpx`, 133 | fontSize: '40rpx', 134 | }; 135 | 136 | function _textDecoration(decoration, index, color) { 137 | return ({ 138 | type: 'text', 139 | text: decoration, 140 | css: [{ 141 | top: `${startTop + index * gapSize}rpx`, 142 | color: color, 143 | textDecoration: decoration, 144 | }, common], 145 | }); 146 | } 147 | 148 | function _image(index, rotate, borderRadius) { 149 | return ({ 150 | type: 'image', 151 | url: Avatar, 152 | css: { 153 | top: `${startTop + 8.5 * gapSize}rpx`, 154 | left: `${startLeft + 160 * index}rpx`, 155 | width: '120rpx', 156 | height: '120rpx', 157 | shadow: '10rpx 10rpx 5rpx #888888', 158 | rotate: rotate, 159 | borderRadius: borderRadius, 160 | }, 161 | }); 162 | } 163 | 164 | function _des(index, content) { 165 | const des = { 166 | type: 'text', 167 | text: content, 168 | css: { 169 | fontSize: '22rpx', 170 | top: `${startTop + 8.5 * gapSize + 140}rpx`, 171 | }, 172 | }; 173 | if (index === 3) { 174 | des.css.right = '60rpx'; 175 | } else { 176 | des.css.left = `${startLeft + 120 * index + 30}rpx`; 177 | } 178 | return des; 179 | } 180 | --------------------------------------------------------------------------------