archerli / nice-router-taro

第0适合后端程序员的前端小程序开发框架

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

第0适合后端程序员的前端小程序开发框架。

nice-router包含两部分:

nice-router-taro

nice-router-react-native (暂未开源, 稍等片刻)

多端统一开发体验

满足前端页面驱动和后端路由驱动的需求

给予后端开发页面控制权(方便实现客CS程序的千人千面,业务变更)

nice-router-taro

基础知识:React + DVA + Taro + TaroUI

Taro 是京东家的小程序开发框架,基于react的语法,跨多端开发框架(微信小程序,支付宝小程序,RN,抖音小程序......)

  • 目前来说Taro可能是综合评分最高的第三方小程序开发框架(相比wepy和mpvue)

DVA 基于redux + saga的轻量级react开发框架

如何开始

1.环境与知识准备
  1. 下载安装 Taro cli

  2. 成为开发者(找到您的小程序应用的管理员,把你的微信添加到开发者列表里就行)

  3. 下载 nice-router-taro

git clone https://github.com/kala888/nice-router-taro
  1. 修改小程序AppId (project.config.json)
    "appid": "wxff........07",
  1. 修改 默认title和theme (可选)

修改主色:通过 Taro UI 填入主色后,下载并打开文件 修改./src/styles.theme.scss中的三个值就行了

  $color-brand: #6dbb4d;  
  $color-brand-light: #92cc7a; 
  $color-brand-dark: #57963e;

修改navigationBarBackgroundColor和tabBar的颜色(app.js中)

  1. 修改服务端地址 (可选)

./src/utils/config.js

const baseURL = 'https://demo2.doublechaintech.com/storedev/wxappService/'
  1. 编译,启动开发环境
#下载相关的依赖,可以用npm install或者yarn
yarn
#启动小程序 可以用npm run dev:weapp或者yarn dev:weapp
yarn dev:weapp
  1. 微信开发者工具中,导入项目 查看效果

小提示:

1.以集成prettier,提交代码前,先 'yarn format' 一道,有助于团队成员间代码merge.

2.文档中提到的“服务端”是指供前端开发使用Façade层,根据项目架构不同可能指代的是后台或者中台应用。(Façade 读音: 法萨)

老铁,都看到这了,点个赞呗

2.我需要一个后端服务,最好搭配一个中台
  • 这里推荐使用自动代码生成框架DaaS Start Kit(TODO应该有一个链接),可以与nice-router完美配合。

开发手册

新增简单页面

让页面与后端进行数据交互

来几个概念和约定

简单使用listof组件

如何创建新的line-item

图片上传

提交一个Form

Step-Form

ServerImage

使用后端驱动Toast消息

使用后端驱动的Popup消息

使用后端驱动的登录跳转

NavigationService

view-mapping

nice-router.model

几个内置页面

混搭H5页面

断网重试network-exception-page

使用HomePage

使用LoginPage

使用Listofpage

使用GenericPage

内置的Genericpage UI Element

内置的Listof lineitem

......
100. Tips

nice-router 已经组件共享提供了基础的支持。希望各位兄弟贡献各种常用的组件,尤其是那些促销组件。让体力活变为OOTB。

nice-router-taro 开发文档

nice-router-react-native 开发文档

About

第0适合后端程序员的前端小程序开发框架


Languages

Language:JavaScript 83.3%Language:CSS 16.2%Language:HTML 0.5%