项目说明 原生微信小程序全局状态管理工具，轻量，便捷，高性能，响应式。 npm链接 ：https://www.npmjs.com/package/@savage181855/mini-store 安装 [代码]npm i @savage181855/mini-store -S [代码] 快速入门 在[代码]app.js[代码]文件调用全局 api，这一步是必须的！！！ [代码]import { proxyPage, proxyComponent } from "@savage181855/mini-store"; // 代理页面，让页面可以使用状态管理工具 proxyPage(); // 代理页面，让组件可以使用状态管理工具 proxyComponent(); // 这样子就结束了，很简单 [代码] 定义[代码]store.js[代码]文件，模块化管理 [代码]import { defineStore } from "@savage181855/mini-store"; const useStore = defineStore({ state: { count: 0, }, actions: { increment() { this.count++; }, }, }); export default useStore; [代码] [代码]indexA.js[代码]页面 [代码]// 导入定义的 useStore import useStore from "../../store/store"; Page({ // 注意：这里使用 useStore 即可，可以在this.data.store 访问 store useStoreRef: useStore, // 表示需要使用的全局状态，会自动挂载在到当前data里面，自带响应式 mapState: ["count"], // 表示想要映射的全局actions，可以直接在当前页面调用 ，例如：this.increment() mapActions: ["increment"], watch: { count(oldValue, value) { // 可以访问当前页面的实例 this console.debug(this); console.debug(oldValue, value, "count change"); }, }, onIncrement1() { // 不推荐 this.data.store.count++; }, onIncrement2() { this.data.store.patch({ count: this.data.store.count + 1, }); }, onIncrement3() { this.data.store.patch((store) => { store.count++; }); }, onIncrement4() { this.data.store.increment(); }, }); [代码] [代码]indexA.wxml[代码] [代码]<view> <view>indexA</view> <view>{{count}}</view> <button type="primary" bindtap="increment">+1</button> <button type="primary" bindtap="onIncrement1">+1</button> <button type="primary" bindtap="onIncrement2">+1</button> <button type="primary" bindtap="onIncrement3">+1</button> <button type="primary" bindtap="onIncrement4">+1</button> </view> [代码] [代码]indexB.js[代码]页面 [代码]// 导入定义的 useStore import useStore from "../xxxx/store.js"; Page({ // 注意：这里使用 useStore 即可，可以在 this.data.store 访问 store useStoreRef: useStore, // 表示需要使用的全局状态，会自动挂载在到当前data里面，自带响应式 mapState: ["count"], }); [代码] [代码]indexB.wxml[代码] [代码]<view> <view>indexB</view> <view>{{count}}</view> </view> [代码] 全局混入 [代码]app.js[代码]文件 [代码]import { proxyPage, proxyComponent } from "@savage181855/mini-store"; // 这里的配置可以跟页面的配置一样，但是有一些规则 // 'onShow', 'onReady', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', // 'onPageScroll', 'onResize', 'onTabItemTap'等方法，全局的和页面会合并，其余的方法，页面会覆盖全局的。 proxyPage({ onLoad() { console.debug("global onLoad"); }, onReady() { console.debug("global onReady"); }, onShow() { console.debug("global onShow"); }, onShareAppMessage() { return { title: "我是标题-- 全局", }; }, }); // 这里的配置可以跟组件的配置一样，但是有一些规则 // 'created','ready','moved','error','lifetimes.created','lifetimes.ready', // 'lifetimes.moved','lifetimes.error','pageLifetimes.show','pageLifetimes.hide', // 'pageLifetimes.resize'等方法，全局的和组件会合并，其余的方法，组件会覆盖全局的。 proxyComponent({ lifetimes: { created() { console.debug("global lifetimes.created"); }, }, }); [代码] 代码片段 https://developers.weixin.qq.com/s/ZO0SX2mr7xDj

小程序流量主、广告位类型和广告收益分析 ## 本文介绍 最近在小程序的几个微信群，经常有朋友问到以下几个问题 1、小程序怎么盈利 2、小程序流量主是什么以及怎么开通 3、小程序广告有哪些类型，哪种广告类型相对收益最大 4、 ## 小程序如何盈利 目前对个人小程序开发者而言，只有通过开通流量主，并且按照官方规范要求添加广告位，才能获取收益，当然打赏除外。 ## 什么是流量主如何开通 流量主是微信对外提供的一个服务，通过开通流量主，就可以在小程序合适的位置引入广告位，进而实现收益 登录公众号后台（ https://mp.weixin.qq.com/ ）在左侧菜单中，找到 推广-流量主，点击进去会看到如下截图 [图片] 小程序流量主： 1.开通条件：小程序累计独立访客（UV）1000以上，且无违规记录，即可开通流量主功能。 温馨提示：如满足条件仍无法开通，可能是数据同步问题，建议等待1-2个工作日后再试。 2.申请方法：进入微信公众平台小程序后台，点击左侧面板“流量主”，满足开通门槛的小程序开发者点击“开通”，提交财务资料，待审核通过后成功开通流量主功能，即可创建相应的广告位。 3.广告接入指引： 广告接入可查看： 微信小程序广告接入指引 在开通流量主的过程中，会绑定个人银行卡，以方便进行后续的广告收益结算，目前结算每月两次，具体官方公告可以查阅 [流量主结算周期及开票规则调整说明][2019-12-03发布] https://mp.weixin.qq.com/promotion/readtemplate?t=notice/detail_page&time=1575340587&notice_id=634169 ## 广告类型有哪些 Banner激励式视频插屏视频广告前贴视频 以下为各广告类型，截图示例， [banner广告] [图片] [插屏广告] [图片] 视频广告 [图片] 由于插屏广告会影响用户体验，所以不建议放太多场景使用。 具体不同类型广告体验，可以扫码 [图片] 首页模块-->>插屏广告使用说明-->>视频广告关于我们-->>banner广告 ## 哪种广告类型收益相对最大 [图片] 在10月30号，将banner广告同一替换为激励式视频广告和视频广告，收益很明显从30元上升到90元、150元 可以看到视频广告相对于banner广告，对于收益增加是有用的。 下图是某小程序12月4号一天的收益数据 [图片] 12月4号一天，不同广告类型，收益分析 总收益 194.74+23.27+147.82=365.83 具体分拆来看 广告类型点击量总收益单个点击收益(元)banner1956194.740.099插屏广告6223.270.375激励式视频广告152147.820.972 通过上图我们对比分析，不难得出以下结论：激励式视频广告单个点击的收益最大、 当然我们不能通过单一维度来了解哪种收益最好，还要综合考虑，比如哪种广告对用户影响最小，毕竟不管哪种方式，广告的接入肯定会带来交互体验上的障碍， 我们必须在交互体验和广告收益这两者之间做好权衡。 ## 系统公告 激励式广告于7月31日支持30秒视频素材，广告流量将逐步放开，MP后台-广告位管理模块可支持选择6-15秒视频或6-30秒视频素材的功能，请流量主根据产品进行调整。程序视频广告已于9月4日正式全量上线，开通后即按广告曝光获得分成收入，进一步提升流量变现收益。小程序视频前贴广告组件已于8月30日正式全量上线，开通后即按广告曝光获得分成收入，进一步提升流量变现收益。## 官方文档 小程序广告组件流量主操作指引https://wximg.qq.com/wxp/pdftool/get.html?id=BJSyDkLqz&pa=14&name=miniprogramAds_supplier_manual应用规范https://wxa.wxs.qq.com/mpweb/delivery/legacy/pdftool/get.html?id=rynYA8o3f&pa=10&name=miniprogramAds_supplier_guidance小程序流量主应用规范https://wximg.qq.com/wxp/pdftool/get.html?id=rynYA8o3f&pa=10&name=miniprogramAds_supplier_guidance处罚标准https://wxa.wxs.qq.com/mpweb/delivery/legacy/pdftool/get.html?id=BkTGkbs2G&pa=1&name=miniprogramAds_supplier_regulation小程序视频广告流量主指引https://wximg.qq.com/wxp/pdftool/get.html?post_id=1317小程序视频前贴广告流量主指引https://wximg.qq.com/wxp/pdftool/get.html?post_id=1318## 总结三点 从纯收益的角度来讲，在各种广告类型中，视频广告（包含激励式视频广告、视频广告、视频前贴广告）要比banner广告要好，而且好很多从用户体验来讲，插屏广告是首次打开带插屏广告的页面强制弹出的，但是广告过后，在页面是不占空间的，这是区分与其他广告的地方，banner广告、激励式视频广告、视频广告、视频前贴广告都是在页面中占固定的空间的，这一点要小程序运营同学权衡。Banner广告是按点击，激励式视频、视频广告、插屏广告都是按照曝光来收取广告费用的，这一点非常重要，难怪我每次手工点击我的视频广告没有见流量的增加[哭脸.jpg]。[感谢 @ 仙森 补充于2019年12月9号] 虽然对个人开发者而言，我们开发小程序的目的是为了收益（当然也有为了情怀而开发），在了解如何收益的情况下，我们还是应该尽量把精力放在小程序本身的开发上面。

单词天天斗 (毕业设计/实战小程序学习/微信小程序完整项目) 介绍 小程序我们都很熟悉，它是一种不用下载安装就能使用的、基于微信容器的轻应用。并且微信小程序提供了云开发能力，即无需搭建服务器就可实现后端服务，提供了数据库、云存储、云函数等能力。 该项目基于「微信小程序」原生框架和「微信小程序云开发」实现单词对战类小程序，支持好友对战、随机匹配、人机对战三种不同模式的「对战模式」；另外提供「每日词汇」、「生词本」、「排行榜」、「设置」等功能，实现完整的业务闭环。 单词库包含从小学、初中、高中、四六级、考研、雅思等常需掌握的词汇，支持自定义词库，支持自定义拓展无限本单词书。 技术栈主要为微信小程序、云开发、TypeScript 等，从头搭建项目，基于 git 管理代码版本，使用 eslint 作为代码格式校验，并且组件化拆分页面，前端和云函数均采用 TypeScript。其中将大量实践小程序能力，比如用户信息获取、用户登录、全局状态管理、路由、wxs、npm 包、音频播放、震动、转发分享、动画、云数据库等。 项目提供完整设计稿，项目演示可查看微信小程序「单词天天斗」，扫码体验 ↓ [图片] 适宜人群 毕设参考：项目文档齐全、难度合适、技术广度大、业务闭环，含项目解析文档和教程，这是一个超级适合作为毕设学习的小程序项目。 私有化部署运营：无论你是想通过小程序变现，还是想给自己的「英语课程班级」增加一个支持词汇和单词书自定义的学习渠道，这个都是一个「企业级」的项目选择。 有小程序的前端开发经验，想尝试全栈开发，快速搭建全栈项目的同学。 掌握一定 JavaScript 语法基础，想通过一个精炼的实战案例，来整体地学习前端开发的同学。 想了解小程序开发知识的互联网从业人员。 对小程序开发感兴趣的 IT 技术爱好者。 想要开发一个「对战」类目的小程序，比如单词 PK，公务员考试题目 PK，诗词 PK，驾照考试 PK 等都可以参考该项目实现。 需求介绍 首页 [图片] 首页主要由用户信息展示、提示卡和单词书工具栏、核心功能入口区、底部栏几个模块组成，详细介绍如下： 用户信息展示：当用户已经授权过用户信息的情况下，展示用户授权的头像和昵称信息，如果用户还未授权，则展示昵称为「神秘学霸 (点击登录)」和默认头像，点击后可进行用户信息授权。另外需要展示用户的词力值，对战模式的对站局数和胜利局数。 工具栏：用户当前的「提示卡数目」和当前选择的「单词书的缩写」。点击提示卡后，弹窗提示提示卡的作用；点击单词书后，弹出单词书选择的浮窗列表，可以上滑无限加载，单词书顺序支持配置，单词书列表每项需要展示单词书的完整名称和缩写、词汇数量、选择人数。 核心功能入口：随机匹配、好友对战、每日词汇、生词本入口，当点击除了「生词本」外的其他项，若用户还未进行过用户信息授权，则拉起授权，授权后跳转至对应功能页，「好友对战」入口循环放大缩小动画。 底部栏：排行榜入口、关于&公告入口、建议反馈入口，点击后跳转至不同的功能页，建议反馈跳转页使用微信提供的feedback实现。 其他：整页背景图及设置入口，「设置」增加无限旋转动画，点击后跳转至「设置页」。新用户打开小程序后，增加「添加小程序」引导，点击弹窗后打开操作指南，当点击「我知道了」后，打开小程序不再弹窗引导。 对战模式 [图片] 单词对战模式主要由好友对战、随机匹配、人机对战三种不同的模式组成，详细介绍如下： 对战通用介绍 入口：在小程序首页可通过点击「好友对战」、「随机匹配」分别进入两种不同的模式，在「随机匹配」模式中可开始「人机对战」。 答题模式：对战模式使用根据单词选择单词释义的形式进行答题。 对局词汇数目：每一局对战的词汇数目可在「设置页」中进行设置，支持每局 8、10、12、15、20、30 个词汇进行对战，对战词汇数由对战创建者决定。 对局词汇分类：对战的单词书可通过首页「单词书」选择进行更换，对战的单词分类由对战创建者决定。 对战过程分数机制：对战过程中，当有任意一方选择后，显示该题答题者的得分情况，每道题满分 100 分，选择越快分数越高，选择正确最多获得 100 分，最少获得 1 分，选择错误扣除 10 分。 对战过程答题机制：每道题最长答题时间为 10 秒，当倒计时结束，如若用户还未答题，判定为该题答题错误。当双方都答题结束，切换下一题。 提示卡机制：答题过程中，用户可使用提示卡进行答题，当提示卡数目大于 0 时，点击提示卡则进行选择，得分机制和普通答题一致，但使用提示卡答题的单词需要自动加入生词本。 对战结束：每局对战结束后，需要显示该局的对战结果，包含：本局所有词汇选择结果、用户的选择得分、对战输赢情况。对战结束后根据本局分数计算增加相应的词力值，对战结束页可选择「分享战绩」、「再来一局」。 分享战绩：对战结束后，用户可分享本局对战结果给任意用户或群，用户点击分享结果可进入查看本局的对战结果，但不显示「分享战绩」和「再来一局」，换成显示「创建好友对战」和「返回首页」。 再来一局：对战结束后，对战创建者显示「再来一局」，对战加入者显示「等待创建对战房间」，当房主点击再来一局创建同上一局对战词汇分类和数目相同的对战，另外一个用户由「等待创建对战房间」变为「再来一局」，点击后可加入房间。 对战检测：当对战过程中，有任一用户退出对战则结束对战，提示「对方逃离」后立即进行结算。对战过程中，如果倒计时结束5秒了还没切换至下一题，则认为有用户连接中断，也同样显示「对方逃离」后进行对战结算。 对战过程其他功能：答题错误或者使用提示卡的单词自动加入用户生词本，题目切换时自动播放单词发音，对战过程中播放对战背景音乐，用户可随时开启和关闭。 好友对战 可通过首页「好友对战」创建好友对战房间，可将房间发送到个人或群聊，其他用户点击分享结果后，可点击「加入房间」进行对战加入，房间创建者「好友邀请」按钮变为「开始对战」，点击后双方开始对局。 随机匹配 随机匹配不强制每局的单词对战数目选择一样，只需单词书选择一致的用户就可以匹配到一起进行对战。 如果点击「随机匹配」后，没有已经创建好的随机匹配房间，则创建一个对战房间，等待匹配其他后面点击进入的用户。 如果 2 分钟后，还是没匹配到用户，则开始一局人机对战模式。 人机对战 可在随机匹配页面进入人机对战模式。 人机的用户数据随机抽取使用数据库中预设的用户数据作为头像和昵称展示。 人机选择的正确率为 75% ，人机的选择时间随机在 2 ~ 3 秒之间，在用户选择后 200 毫秒，如果人机还没选择，则人机立即进行答题，减少用户等待时间。 每日词汇 [图片] 答题模式：每日词汇可根据用户选择的单词书进行答题，根据单词选择单词释义。 生命值：每局答题拥有三条生命值，每答错一次则扣除一条生命值，但生命值没有后，可通过分享小程序获取一次复活机会，当机会完全没有后，显示再来一局。 答题分数排名机制：每答题正确一题，可获得一分，一局对战的分数进行叠加，对战结束时使用当前得分和自己的历史最高得分进行比较，如果高于历史最高得分，则记录分数和当前选择的单词书，用于「每日词汇」排行。 倒计时：每道答题时间限制为30秒，如果没有答题则判定为错误。 其他：答题过程中可以使用答题卡进行答题，可以点击「播放发音」选项进行该题单词发音。 其他 (生词本 - 排行榜 - 设置) [图片] 生词本 列表：显示用户在「对战模式」和「每日词汇」中答题错误和使用提示卡进行答题的单词，列表按照词汇加入时间进行排序，先显示最新加入的生词，列表可无限上拉加载。 列表中默认不显示生词的释义，可通过点击「单词」查看释义。 长按生词可切换「删除」生词和「播放单词发音」选项。 排行榜 排行榜支持按照「词力值」和「每日词汇最高分数」进行排序，均最多显示前20名的用户头像、昵称信息。 排行榜底部可根据当前排行榜类型显示自己的排名信息。 设置 对战词汇数目：可设置「对战模式」的每局对战词汇数量。 可设置「对战模式」和「每日词汇」答题过程中是否默认播放背景音乐、是否默认播放单词发音、错题时是否震动。 生词本：一键清空单词本所有数据。 用户信息：可在设置中更新用户的昵称和头像信息，支持自定义昵称和头像。 关于入口 && 微信联系方式。 技术栈 前端：微信小程序原生框架。 服务：微信小程序云开发。 编程语言：typeScript、JavaScript、CSS。 全局状态管理：一个基于微信小程序的mini全局状态管理库 wxMiniStore。 前端路由管理：The router for Wechat Miniprogram - wxapp-router 全局事件管理：Tiny 200 byte functional event emitter / pubsub - mitt 服务端路由、控制器等：轻量级原生实现，支持路由、控制器、Model 数据操作。 动画实现：小程序原生动画，css 动画。 文档 微信小程序云开发：手摸手开发单词对战小程序 (编写中) 基础知识：前端开发快速上手 基础知识：微信小程序开发快速上手 基础知识：微信小程序云开发快速上手 项目新建：小程序TypeScript云开发项目创建及项目工程化 首页样式：首页需求介绍及布局样式开发 首页开发：全局状态管理及登录的实现 首页交互：数据导入及首页数据渲染 首页功能：单词书的分页加载及选择 单词对战：对战需求介绍及全局路由管理 对战创建：用户信息获取及对战房间创建 对战加入：好友邀请及加入好友房间的实现 对战开始：对战过程的实现及题目切换 对战结算：对战结果展示及再来一局的实现 对战匹配：随机匹配的实现及匹配高并发处理 人机模式：人机对战的实现及全局事件管理 对战总结：对战模式其他优化及对战模式实现总结 每日词汇：需求介绍及布局样式开发 词汇选择：答题交互实现及题目切换 词汇结算：任务复活及再来一局的实现 生词本：生词本实现及页面级上拉分页加载实现 排行榜：词力值及每日词汇排行实现 其他页面：设置页及基于富文本的关于页实现 总结：独立开发之旅及项目复盘 附录：小程序调试技巧 附录：数据库设计 附录：小程序自动化脚本部署及源码下载 部署教程 在线文档 部署文档：http://words-pk-deploy.i7xy.cn/ 部署视频教程 部署视频教程 其他 联系我 微信：34805850 后台 [图片] 项目开源 github 单词天天斗：https://github.com/arleyGuoLei/wechat-app-words-pk gitee：https://gitee.com/arley66/wechat-app-words-pk