尧图网站建设 
酱茄小程序开源版前端源码剖析pages.json路由设计、请求封装与Token管理机制全解【免费下载链接】jiangqie_kafei酱茄小程序开源版基于WordPress的微信小程序适用于博客小程序和新闻资讯小程序。项目地址: https://gitcode.com/gh_mirrors/ji/jiangqie_kafei酱茄小程序开源版是基于 WordPress 的微信小程序解决方案一套代码即可实现博客小程序、新闻资讯小程序的多端发布。本文带你快速读懂它的前端源码client_uni目录从 pages.json 路由设计到统一的请求封装再到 Token 登录态管理机制帮新手建立完整认知。一、先看清前端目录结构前端是一个标准的 uni-app 项目核心目录职责非常清晰目录/文件作用pages.json全局路由、TabBar、全局样式配置pages/12 个业务页面首页、热榜、分类、登录等utils/api.js集中管理所有后端接口地址utils/rest.js封装 uni.request统一注入 Tokenutils/auth.js登录态管理存取用户与 Tokenutils/config.js配置后端域名JQ_DOMAIN这种页面 utils 工具层的分层方式是小程序项目中最经典也最易读的组织结构。二、pages.json 路由设计一条配置看懂整站骨架pages.json 是整个小程序的导航地图打开 pages.json 可以看到 12 个页面注册项分为三类角色1. TabBar 页面底部导航pages.json 定义了 4 个 Tab首页、分类、热榜、我的。注意首页注册了navigationStyle: custom即自定义导航栏这样才能实现截图中红色的品牌化顶部区域2. 业务功能页文章详情pages/article/article、文章列表pages/list/list、搜索pages/search/search、关于我们pages/about/about等通过uni.navigateTo从 Tab 页跳转进入。3. 登录流程页login授权登录/绑手机号、verify新用户完善资料、logout注销、viewhtml渲染协议文本、webview打开外部链接这组页面构成了完整的用户授权链路。值得学习的细节配置onReachBottomDistance: 50列表类页面距底部 50px 就触发加载下一页滚动加载体验更顺滑networkTimeout统一设置 10 秒超时pages.json避免弱网下请求长时间挂起globalStyle中navigationBarBackgroundColor: #E6321D一键统一品牌红个别页面如我的再单独覆盖成#DA2A1A。小程序首页顶部导航、幻灯片、导航项等内容均可在 WordPress 后台配置路由跳转地址如/pages/list/list?tag_id14直接在后台填写三、请求封装api.js rest.js 的分工协作酱茄把接口地址和请求行为拆成两层这是它最值得借鉴的设计。第一层地址集中管理api.js 用一个模板函数生成全部接口https://{域名}/wp-json/jiangqie/v1/{模块}/{动作}所有接口以常量导出如JIANGQIE_POSTS_LAST最新文章、JIANGQIE_POST_DETAIL文章详情、JIANGQIE_USER_LOGIN登录。页面里只引用常量改接口不用翻遍页面。域名则单独放在 config.js 的JQ_DOMAIN中部署时只需改这一处。第二层行为统一封装rest.js 把uni.request包成 Promise并在每次请求时自动完成 4 件事自动携带 Tokendata.token Auth.getToken()页面无需关心登录态防缓存GET 请求自动追加时间戳t和随机数r避免拿到旧数据平台标识通过条件编译MP-WEIXIN/MP-BAIDU/MP-QQ给请求打os标签一套代码多端发布统一错误处理code 0视为成功code -1未登录自动跳转登录页code -11需绑定手机号跳转login?typemobile。另外还提供upload方法处理图片上传rest.js上传中自动显示上传中…… loading完成即隐藏。页面代码因此可以简化为一行Rest.get(Api.JIANGQIE_POST_DETAIL, { id }).then(res { ... })四、Token 管理机制从登录到失效的完整闭环登录态的核心只有 40 多行的 auth.js但设计得很完整1. 登录code 换 Token在 login.vue 中uni.login()向平台换取临时code连同channelweixin/qq/baidu一起提交给后端user/login3接口login.vue。后端用 code 换取用户身份后返回 Token前端调用Auth.setUser(res.data)把用户信息写入本地存储key 为 constants.js 中定义的jiangqie_user。2. 读取一切请求自动带 TokengetToken()从本地存储读取用户对象并取出tokenisLogin()复用同一方法——只要 Token 存在就视为已登录。配合 rest.js 的自动注入整个请求链路对页面透明。3. 失效两条自动退出路径服务端校验 Token 失效时返回code -1rest.js 自动重定向到登录页用户无感知地重新授权Auth.checkSession()调用uni.checkSession检查微信会话失效时主动logout()清除本地存储auth.js。4. 注销与首次登录引导首次登录的用户first标记会被重定向到verify页完善资料注销走独立的logout页面需先勾选注销须知再调用user/logout接口。个人中心、文章列表、详情页的完整效果如下五、新手上手三步走克隆并部署后端将 WordPress 插件api_uni安装到你的站点在后台基础设置中填入小程序 Appid / AppSecret修改前端域名把 config.js 中的JQ_DOMAIN改成你的域名需为已备案的 HTTPS 域名用 HBuilderX 编译运行前端在client_uni目录选择微信开发者工具调试即可无需改动任何页面代码。总结酱茄小程序开源版的前端源码虽然精简却把小程序工程化的要点讲得很透pages.json 管路由与全局样式api.js 管接口地址rest.js 管请求行为auth.js 管登录态。四个文件各司其职几乎没有一处重复逻辑——这正是新手学习 uni-app 项目结构时的优质范本。【免费下载链接】jiangqie_kafei酱茄小程序开源版基于WordPress的微信小程序适用于博客小程序和新闻资讯小程序。项目地址: https://gitcode.com/gh_mirrors/ji/jiangqie_kafei创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 酱茄小程序开源版前端源码剖析：pages.json路由设计、请求封装与Token管理机制全解
酱茄小程序开源版前端源码剖析pages.json路由设计、请求封装与Token管理机制全解【免费下载链接】jiangqie_kafei酱茄小程序开源版基于WordPress的微信小程序适用于博客小程序和新闻资讯小程序。项目地址: https://gitcode.com/gh_mirrors/ji/jiangqie_kafei酱茄小程序开源版是基于 WordPress 的微信小程序解决方案一套代码即可实现博客小程序、新闻资讯小程序的多端发布。本文带你快速读懂它的前端源码client_uni目录从 pages.json 路由设计到统一的请求封装再到 Token 登录态管理机制帮新手建立完整认知。一、先看清前端目录结构前端是一个标准的 uni-app 项目核心目录职责非常清晰目录/文件作用pages.json全局路由、TabBar、全局样式配置pages/12 个业务页面首页、热榜、分类、登录等utils/api.js集中管理所有后端接口地址utils/rest.js封装 uni.request统一注入 Tokenutils/auth.js登录态管理存取用户与 Tokenutils/config.js配置后端域名JQ_DOMAIN这种页面 utils 工具层的分层方式是小程序项目中最经典也最易读的组织结构。二、pages.json 路由设计一条配置看懂整站骨架pages.json 是整个小程序的导航地图打开 pages.json 可以看到 12 个页面注册项分为三类角色1. TabBar 页面底部导航pages.json 定义了 4 个 Tab首页、分类、热榜、我的。注意首页注册了navigationStyle: custom即自定义导航栏这样才能实现截图中红色的品牌化顶部区域2. 业务功能页文章详情pages/article/article、文章列表pages/list/list、搜索pages/search/search、关于我们pages/about/about等通过uni.navigateTo从 Tab 页跳转进入。3. 登录流程页login授权登录/绑手机号、verify新用户完善资料、logout注销、viewhtml渲染协议文本、webview打开外部链接这组页面构成了完整的用户授权链路。值得学习的细节配置onReachBottomDistance: 50列表类页面距底部 50px 就触发加载下一页滚动加载体验更顺滑networkTimeout统一设置 10 秒超时pages.json避免弱网下请求长时间挂起globalStyle中navigationBarBackgroundColor: #E6321D一键统一品牌红个别页面如我的再单独覆盖成#DA2A1A。小程序首页顶部导航、幻灯片、导航项等内容均可在 WordPress 后台配置路由跳转地址如/pages/list/list?tag_id14直接在后台填写三、请求封装api.js rest.js 的分工协作酱茄把接口地址和请求行为拆成两层这是它最值得借鉴的设计。第一层地址集中管理api.js 用一个模板函数生成全部接口https://{域名}/wp-json/jiangqie/v1/{模块}/{动作}所有接口以常量导出如JIANGQIE_POSTS_LAST最新文章、JIANGQIE_POST_DETAIL文章详情、JIANGQIE_USER_LOGIN登录。页面里只引用常量改接口不用翻遍页面。域名则单独放在 config.js 的JQ_DOMAIN中部署时只需改这一处。第二层行为统一封装rest.js 把uni.request包成 Promise并在每次请求时自动完成 4 件事自动携带 Tokendata.token Auth.getToken()页面无需关心登录态防缓存GET 请求自动追加时间戳t和随机数r避免拿到旧数据平台标识通过条件编译MP-WEIXIN/MP-BAIDU/MP-QQ给请求打os标签一套代码多端发布统一错误处理code 0视为成功code -1未登录自动跳转登录页code -11需绑定手机号跳转login?typemobile。另外还提供upload方法处理图片上传rest.js上传中自动显示上传中…… loading完成即隐藏。页面代码因此可以简化为一行Rest.get(Api.JIANGQIE_POST_DETAIL, { id }).then(res { ... })四、Token 管理机制从登录到失效的完整闭环登录态的核心只有 40 多行的 auth.js但设计得很完整1. 登录code 换 Token在 login.vue 中uni.login()向平台换取临时code连同channelweixin/qq/baidu一起提交给后端user/login3接口login.vue。后端用 code 换取用户身份后返回 Token前端调用Auth.setUser(res.data)把用户信息写入本地存储key 为 constants.js 中定义的jiangqie_user。2. 读取一切请求自动带 TokengetToken()从本地存储读取用户对象并取出tokenisLogin()复用同一方法——只要 Token 存在就视为已登录。配合 rest.js 的自动注入整个请求链路对页面透明。3. 失效两条自动退出路径服务端校验 Token 失效时返回code -1rest.js 自动重定向到登录页用户无感知地重新授权Auth.checkSession()调用uni.checkSession检查微信会话失效时主动logout()清除本地存储auth.js。4. 注销与首次登录引导首次登录的用户first标记会被重定向到verify页完善资料注销走独立的logout页面需先勾选注销须知再调用user/logout接口。个人中心、文章列表、详情页的完整效果如下五、新手上手三步走克隆并部署后端将 WordPress 插件api_uni安装到你的站点在后台基础设置中填入小程序 Appid / AppSecret修改前端域名把 config.js 中的JQ_DOMAIN改成你的域名需为已备案的 HTTPS 域名用 HBuilderX 编译运行前端在client_uni目录选择微信开发者工具调试即可无需改动任何页面代码。总结酱茄小程序开源版的前端源码虽然精简却把小程序工程化的要点讲得很透pages.json 管路由与全局样式api.js 管接口地址rest.js 管请求行为auth.js 管登录态。四个文件各司其职几乎没有一处重复逻辑——这正是新手学习 uni-app 项目结构时的优质范本。【免费下载链接】jiangqie_kafei酱茄小程序开源版基于WordPress的微信小程序适用于博客小程序和新闻资讯小程序。项目地址: https://gitcode.com/gh_mirrors/ji/jiangqie_kafei创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考