Code Monkey home page Code Monkey logo

taro-ui-demo's Introduction

Taro UI Demo

使用 Taro UI 的示例

该仓库不是 Taro UI 示例小程序的源码,源码请查看 https://github.com/NervJS/taro-ui/blob/dev/src/app.js

相关链接

安装

需要安装 Taro 开发工具 @tarojs/cli

npm install -g @tarojs/cli

下载项目并安装依赖

git clone https://github.com/NervJS/taro-ui-demo
cd taro-ui-demo
npm i

编译并预览

进入项目目录开始开发,可以选择小程序预览模式,或者 h5 预览模式,若使用微信小程序预览模式,则需要自行下载并打开微信开发者工具,选择预览项目根目录。

微信小程序编译预览模式

# npm script
$ npm run dev:weapp
# 仅限全局安装
$ taro build --type weapp --watch
# npx用户也可以使用
$ npx taro build --type weapp --watch

H5 编译预览模式

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx用户也可以使用
$ npx taro build --type h5 --watch

License

MIT

taro-ui-demo's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

taro-ui-demo's Issues

运行npm run dev:weapp时编译停滞

生成 依赖文件 dist/npm/lodash/identity.js
生成 依赖文件 dist/npm/lodash/_copyArray.js
生成 依赖文件 dist/npm/lodash/_Symbol.js
生成 依赖文件 dist/npm/lodash/isArguments.js
生成 依赖文件 dist/npm/lodash/_getNative.js

一直停滞在这里,

官方DEMO都无法运行,什么情况

npm run dev:h5 之前另一个项目怎么设置都没用,各种文档什么都看了,实在没办法,来下载了官方demo,结果一运行还是报同样的错。
node 版本:v 10.14.0
./node_modules/.2.0.1@taro-ui/dist/h5/components/countdown/index.js 105:11
Module parse failed: Unexpected token (105:11)
You may need an appropriate loader to handle this file type.
| } = this.state;
|

return <View className={classNames({

| 'at-countdown': true,
| 'at-countdown--card': isCard

It cannot run, lazy official JD guys.

My OS :

MAC OSX 10.14.3 (18D109)

My Node version :

node -v
v10.15.1

My npm version:

 npm -v
6.9.0

I init node env from zero, and follow your steps and failed.

  • brew install node
  • npm install -g npm
  • npm install -g @tarojs/cli

npm WARN deprecated [email protected]: use babel-plugin-minify-dead-code-elimination and babel-plugin-minify-guarded-expressions
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.

npm WARN deprecated [email protected]: use babel-plugin-minify-dead-code-elimination and babel-plugin-minify-guarded-expressions
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
WARN tarball tarball data for @tarojs/[email protected] (sha1-4NjbtLrTnE+VjmdLBzd6js3v3wY=) seems to be corrupted. Trying one more time.
WARN tarball tarball data for @tarojs/[email protected] (sha1-4NjbtLrTnE+VjmdLBzd6js3v3wY=) seems to be corrupted. Trying one more time.
npm ERR! code EINTEGRITY
npm ERR! Verification failed while extracting @tarojs/[email protected]:
npm ERR! Verification failed while extracting @tarojs/[email protected]:
npm ERR! sha1-4NjbtLrTnE+VjmdLBzd6js3v3wY= integrity checksum failed when using sha1: wanted sha1-4NjbtLrTnE+VjmdLBzd6js3v3wY= but got sha512-ezLEsZCakmCcGxM5WjcNxkJNPcUpiQGSQPt4DfKxS26EvJGlr+zznfMH8nGzCbnz9AskrmeUoTirESeZX7vVDA== sha1-8pEqWmfepsNUc+GuugGnHIYdxzQ=. (49119 bytes)

npm ERR! A complete log of this run can be found in:
/.npm/_logs/2019-03-19T19_07_50_434Z-debug.log

I cannot believe such big official repo could leave such big mistakes for month, if you are not going to maintain, please remove it!

demo无法运行H5 dev版本

启动报错,demo无法执行H5版本的dev环境。
看起来像是webpack loader的问题,请定位,谢谢。
问题信息:
创建 发现文件 src\pages\view\timeline\index.scss ./node_modules/_taro-ui@1.5.4@taro-ui/dist/h5/components/pagination/index.js 101 :11 Module parse failed: Unexpected token (101:11) You may need an appropriate loader to handle this file type. | }; | > return className)} style={customStyle}> | |

在index.html中有一个监听窗口改变根节点大小

// 我修改过的
const onResize = () => {
const { documentElement, style } = document
const { width } = documentElement.getBoundingClientRect()
if (width >= 640) return style.fontSize = "40px"
style.fontSize = (width <= 320 ? 20 : width / 320 * 20) + 'px'

//这里有什么意义 ,并没有调用或者修改什么
// let v, u,
// if (!v && !u) {
// let n = !!navigator.appVersion.match(/AppleWebKit.Mobile./);
// v = devicePixelRatio;
// v = n ? v : 1, u = 1 / v
// }
}
addEventListener("resize", () => onResize());
onResize()

// index.html原话,
!function (x) { function w() { var v, u, t, tes, s = x.document, r = s.documentElement, a = r.getBoundingClientRect().width; if (!v && !u) { var n = !!x.navigator.appVersion.match(/AppleWebKit.Mobile./); v = x.devicePixelRatio; tes = x.devicePixelRatio; v = n ? v : 1, u = 1 / v } if (a >= 640) { r.style.fontSize = "40px" } else { if (a <= 320) { r.style.fontSize = "20px" } else { r.style.fontSize = a / 320 * 20 + "px" } } } x.addEventListener("resize", function () { w() }); w() }(window);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.