实用的小程序快速项目开始模板(原生微信小程序,Taro微信小程序)
发布于 3 年前 作者 pingwu 4625 次浏览 来自 分享

人狠话不多,直接开始介绍,感觉好用实用请收藏点赞加关注

原生微信小程序 项目模板(https://github.com/Gavinpeng2014/weChatTemplate)


更新日志


1.0.1

[2020.11.02] 增强状态管理器 加入持久化状态管理


项目简介

模板适用于快速搭建原生微信小程序项目开发使用

  • 技术栈 原生微信小程序
  • 模板初始中共有5个分包可继续添加,注意单包大小不得超过2M,整包大小(包括主包在内)不得大于微信限制[在小程序IDE右上角详情查看'项目配置 - 高级配置']
  • 模板分包中初始定义了一个testA文件,当分包真正被使用后含有至少一个文件,可自行删除test文件夹
  • 对请求进行初步封装,可根据开发版,体验版,正式版自动切换对应配置的请求API域名详情(详情请看'/utils/request'了解)
  • 模板中已使用 Parser富文本插件
    实用功能示例 <parser html="{{ html }}" tag-style="{{ tagStyle }}"/>
    data 中定义 tagStyle:{ video: 'width: 100%;' } 设置富文本插件内 标签样式设置
    插件官网地址: https://jin-yufeng.github.io/Parser/#/


vsCode IDE完美支持less(需要sass,stylus自行扩展)

  • 确保你的vsCode IDE有安装 Easy LESS 插件
  • git clone 模板后在 vsCode IDE 中开发微信小程序,在app.json中建立新路由,小程序IDE刷新编译,当小程序IDE帮你建立新页面后wxss新建同级同名less文件,less文件编辑保存,自动编译成wxss文件了!
  • 模板文件中的 .vscode 文件为 vsCode IDE 的配置文件感兴趣的同学自行研究


模板中的状态管理器

  • 全局状态 state 支持所有 Page 和 Component,更新时使用独有 diff 能力,性能更强
  • 周期监听 pageListener 能监听所有页面的 onLoad、onShow 等周期事件,方便埋点、统计等行为
  • 全局事件 methods,一处声明,所有 wxml 直接可用的函数
  • 适合原生小程序,即使后期引入,也只需增加几行代码
  • 更多详细介绍请访问插件官网地址: https://github.com/xiaoyao96/wxMiniStore


1.0.1 版本更新扩展 -------- 持久化状态管理(示例场景:如登陆信息存储,小程序回收后再次进入读取登陆状态token等)

  • 强化辅助状态管理器 持久化状态管理
  • 独立封装 processor 处理器, 配合缓存持久化状态管理器,使用简单方便
Page 页面使用
const app = getApp()
当 app.js 中, state 里面的状态, 需要使用持久化存储,
// 登陆状态 -- 示例 传入两个值(String,Any),缓存存储键 String, 默认值(可不传当缓存中没有返回字符串''): Any, 
state: {
    loginState: processor.get('loginState',false)
}
在更新状态 app.store.setState({}) 后, 
调用 app.processor.set(key,value) 进行缓存存储(key类型string,value类型any),
方法1: 指定单个值存储 app.processor.set(key,value)
方法2: 多个值存储 app.processor.set({ key: value, key: value, .... })


---------------------------------------------------------分割线---------------------------------------------------------

TaroTsxTemplate [email protected](https://github.com/Gavinpeng2014/TaroTsxTemplate)


项目简介

1.模板适用于快速搭建简单项目开发使用
2.项目技术栈 Taro + redux + tsx 
3.模板初始中共有5个分包可继续添加,注意单包大小不得超过2M,整包大小(包括主包在内)不得大于微信限制[在小程序IDE右上角详情查看'项目配置 - 高级配置']
4.模板分包中初始定义了一个testA文件,当分包真正被使用后含有至少一个文件,可自行删除test文件夹
5.对请求进行初步封装
6.模板中已有 Parser富文本插件 微信小程序版 tsx 中 usingComponents 引入组件IDE会报错在页面中复制以下代码即可
    declare global {
        namespace JSX {
            interface IntrinsicElements {
                parser: any
            }
        }
    }
    实用功能示例 <parser html={ html } tag-style={ tagStyle }/> state 中定义 tagStyle:{ video: 'width: 100%;' } 设置富文本插件内 标签样式设置
    插件官网地址: https://jin-yufeng.github.io/Parser/#/


介绍项目中 redux 简单快捷使用方式(还没理解 redux 的同学可以暂时这样理解使用,有兴趣的同学可以自行研究)

1.type2.3.4.5.typethis6.type() =>void } 输出 actions 指令
7. [@connect](/user/connect)(({ counter }) => ({ counter }),(dispatch) =>({ xxx() { dispatch(xxx())} })) 给页面提供调用方式 this.props.xxx()
2 回复

1.constants/constants.ts ---------- 定义 action type 常量 2.actions/counter.ts -------------- 定义函数对应指令 3.reducers/counter.ts ------------- reducers 管理默认存储状态, 通过 页面触发 actions 指令更新 存储状态 4.使用默认模板文件 template.tsx 文件创建的页面可快捷使用或体验 redux

  1. type PageStateProps = { counter: {} } 中写入需要用到存在 reducers 中的状态, 可通过 this.props.counter.xxx 在页面中使用
  2. type PageDispatchProps = { xxx: () => void } 输出 actions 指令
  3. @connect(({ counter }) => ({ counter }),(dispatch) =>({ xxx() { dispatch(xxx())} })) 给页面提供调用方式 this.props.xxx()

太厉害了,作者真的太牛了

回到顶部