npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bagevent/taro-component

v1.0.0

Published

Make sure you have Node version >=10.16.0 and (Yarn >=1.9.4)

Downloads

6

Readme

bagevent-taro

Quick Start

Make sure you have Node version >=10.16.0 and (Yarn >=1.9.4)

# install node , https://nodejs.org/en/
# install yarn , https://yarnpkg.com/lang/en/docs/install/
# install taro , https://taro-docs.jd.com/taro/docs/GETTING-STARTED.html
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# clone project
$ git clone https://github.com/BagEvent/bagevent-taro.git

# install package
$ npm install

# run app 开发时要把 `src/variables/index.less` 中引用调整为对应的 start 命令默认执行的 yarn dev:weapp
$ npm start

go to WeChat developer tools

# build project
$ npm run xbuild

# H5 开发
$ yarn dev:h5

File Structure

├── build : 打包相关文件
├── config : 配置文件
├── dist : 打包文件
├── scripts : node 脚本文件
├── src
│   ├── component : Taro组件
│   ├── original : 小程序原生内容(页面什么的)
│   ├── pages : 新的页面
│   ├── store : Mobx 状态控制文件
│   │   ├── pages : 页面 UI 相关的Mobx 状态控制文件,和页面一一对应,用来控制页面上显示的变换
│   │   ├── component : 组件 UI 相关的Mobx 状态控制文件,和组件一一对应,用来控制组件上显示的变换
│   ├── utils : 工具库
│   ├── variables : 主题文件
│   ├── app.less : 全局样式文件
│   ├── app.tsx : 组件入口
│   ├── ext.json : 小程序 ext.json
├── .eslintrc : 项目 ESLint 规则文件
├── .gitignore
├── .prettierrc : 项目自动格式化规则文件
├── .package.json

Style Guide

  • 安装 ESLint 及 Prettier - Code formatter 插件,由配置文件 .prettierrc.eslintrc 控制。 请解决每一条 Warning 。
  • 普通 JS/TS 文件及文件夹,全小写,中线命名法,比如 char-comment、util.js、util-helper.js
  • Taro 组件文件、Taro 组件样式文件、TypeScript 类定义 命名遵循 Pascal 命名法,例如 ReservationCard.jsx。组件定义名称和文件名保持一致。
  • 方法及变量名,驼峰命名
  • 路由级组件命名增加Page后缀,比如 EventPage.tsx
  • Mobx 状态控制文件增加Store后缀,比如 page-store.ts。
  • 页面 UI 和事件回调写在 Component 或 Page 的 Store 文件里。数据相关的方法应写在 store 下,命名时以功能而不是组件名命名。例如:src/store/component/top-navigation-bar-store.ts 和 src/store/page-store.ts

样式规范