To Our Loves

本文最新版本

0 情侣积分互动小程序

在idofSunChonggao 的基础上进行开发, 感谢！

且感谢初版（UxxHans）！

⭐ 如果本仓库对您有所帮助，您的fork或star就是对我最大的鼓励，谢谢！

v22.0.0

改了还蛮多的，具体看界面展示吧~

零前端基础，全凭爱意。代码存在诸多不足和bug，仅供参考。

v22.1.0

⭐ 增加任务类型选择：（任务可以发给自己，也可以发给对方）

发布者from：

我from的任务，你to来监督：（对方监督自己完成）

此任务是from申请，由from执行，需to监督确认。

你to的任务，我from来监督：（自己监督对方完成）

此任务是from申请，由to执行，需from监督确认。

1 最新版本的界面展示

1.1 主页

1.2 任务

v22.1.0

v22.0.0

1.3 笔记

1.4 商城 && 仓库

2 初步的部署指南

⭐⭐初步的部署指南的结果是 commits “初步部署Fix” 版本⭐⭐
⭐⭐其基于 idofSunChonggao 的版本 ⭐⭐

2.0 小程序注册账号以及设置相关

2.0.0 小程序注册

https://mp.weixin.qq.com/wxopen/waregister?action=step1

2.0.1 登录开发

https://mp.weixin.qq.com/

⭐微信扫码 - 选择你的账户

2.0.2 开发流程

⭐去完成小程序信息以及小程序类目。

⭐再点击左侧成员管理，添加体验人员。

2.1 自己开发（微信云开发）

2.1.1 下载开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

2.1.2 导入项目

# 克隆项目
git clone https://github.com/idofSunChonggao/Rainbow-Cats-Personal-WeChat-MiniProgram.git

⭐导入项目进入微信开发者工具。

⭐选择文件夹

⭐选择好自己的AppID

2.1.3 云开发设置

⭐进入后，点击云开发

⭐进入后点击数据库->在集合名称添加四个集合：MarketList, MissionList, StorageList, UserList

如下所示

⭐在UserList中添加两个默认记录, 在两个记录中分别添加两个字段 _openid与credit

字段 = _openid | 类型 = string | 值 = 先不填
字段 = credit  | 类型 = number | 值 = 0

结果如下

⭐⭐⭐⭐⭐⭐ 最新版本的这里还需要添加几个字段

⭐设置 - 环境设置 - 复制环境ID

修改 miniprogram\envList.js 为：

const envList = [{"envId":"cloud1-xxxxxxxxxxxxx","alias":"cloud"}]
module.exports = {envList,
}

⭐设置好编辑器云函数根目录(cloudfunctionRoot)

⭐右键点击 cloudfunctions 中的每个文件夹并选择云函数云端安装依赖上传 (不上传 node_modules), 一共九个。
⭐⭐ 最新版本的需要上传更多云函数

结果：

⭐点击真机调试，出现

Error: miniprogram_npm/weui-miniprogram/icon/icon.js does not exists [1.05.2204250][win32-x64]

可能git clone 没把它下下来，自己去专门复制一个这份文件，并放到相应目录下。

⭐没有安装npm或者NodeJs, 需要先在这里下载安装: https://nodejs.org/dist/v16.15.1/node-v16.15.1-x64.msi

⭐win+R 打开cmd，安装相关

到cloudfunctions里执行

npm install --save wx-server-sdk@latestnpm init -y

如图所示：

⭐再对miniprogram\pages\MainPage\index.wxml 进行修改，可以编译通过一个没有错误的demo

⭐点击上传

⭐再回到https://mp.weixin.qq.com/ 的版本管理里，将开发版本设置为体验版。

⭐然后通过开发者账号分享到男/女朋友手机上(要先登录小程序开发者账号)。

⭐在两个手机上运行小程序->分别在两个手机上的小程序里新建任务。

⭐然后回到云开发控制台的missionlist数据库集合->找自己和男/女朋友的openid变量并记录。

⭐把这两个记录下来的拷贝到云开发控制台UserList数据集合里刚刚没填的openid变量中。

⭐把这两个记录下来的openid拷贝到miniprogram/app.js里的openidA和openidB的值里(A是小明，B是小红)。

⭐在miniprogram/app.js里把userA和userB改成自己和男/女朋友的名字。

⭐在miniprogram/app.js里把date改成自己和男/女朋友的恋爱纪念日。

⭐然后再试试看是不是成功了! (别忘了任务和物品左滑可以完成和购买)。

⭐别忘了最后点击右上角上传->然后在开发者账号上设置小程序为体验版->不用去发布去审核。

3 进一步的修改参考

内容	位置	关键词定位
时间	miniprogram\app.js	date: ‘2000/1/1 00:00:00’,
名字	miniprogram\app.js	//记录使用者的名字
openid	miniprogram\app.js	//记录使用者的openid
主题颜色	miniprogram\app.json	navigationBarBackgroundColor
图片滚动小球的颜色	miniprogram\pages\MainPage\index.wxml	selectedColor
主页最上方标题	miniprogram\app.json	indicator-active-color
每日一句	miniprogram\pages\MainPage\index.js	sentences: [
首页图片	miniprogram\pages\MainPage\index.wxml	./Images/HomeCover01.jpg
商城页的图片	miniprogram\pages\Market\Images
任务页的图片	miniprogram\pages\Mission\Images
仓库页的图片	miniprogram\pages\Account\Images
商城里，券是谁发布的	miniprogram\pages\Market\index.wxml
商品详情里，谁发布的	miniprogram\pages\MarketDetail\index.js	from_who:
添加页面	miniprogram\app.json	pages
添加存储List	miniprogram\app.js	用于存储待办记录的集合名称
修改存储List	miniprogram\pages\RecodeDetail miniprogram\pages\RecodeAdd miniprogram\pages\Recode 的js文件	三个页面对应的collectionRecodeList
添加下方新按键	miniprogram\app.json	tabBar
左滑图标icon	https://github.com/wechat-miniprogram/weui-miniprogram/blob/master/docs/icon.md https://fonts.google.com/icons?selected=Material+Icons	下载到 ToOurLoves\miniprogram \miniprogram_npm\weui-miniprogram\slideview\Images
修改跳转	miniprogram\pages\Recode\index.js	navigateTo
判断添加进行显示	miniprogram\pages\Recode\index.wxml	allMissions.length
选择颜色	https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Color.html
增加一些变量	cloudfunctions\addElement\index.js 需要同时将这个云函数上传更新，以及所有调用addElement这个云函数的地方需要进行初始化例如miniprogram\pages\MarketAdd\index.js 里需要有增加的变量的初始值特别注意 pages\Market\index.js 这里也有添加东西到仓库	credit、chapterNum wx.cloud.callFunction({name: ‘addElement’
更改章节数	加云函数，并上传它 cloudfunctions\editChapterNum\package.json 改函数名字 cloudfunctions\editChapterNum\index.js 改相关逻辑 miniprogram\pages\Note\index.js 改相关逻辑定位词见后云函数开发参考： https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/update.html	else if (index === 2)
滚动条设置	https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html	picker-view

4 感谢

一些图片来源：

http://mof.chu.jp/icon.html?ref=uiset

https://emojipedia.org/

一些开发参考：

https://developers.weixin.qq.com/miniprogram/dev/framework/

忘记记录了…

情侣积分微信小程序零基础开发教程（附代码及开发指南）相关推荐

知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
微信小程序零基础入门_第一章小程序和开发者工具的介绍
第一章小程序和开发者工具的基本介绍 1.1 小程序的开发工具微信小程序的开发者需要先通过微信公众平台注册开发者账号.在微信公众平台网页中的账号分类->小程序中有着较为详细的注册介绍,可以较为 ...
微信小程序零基础入门_第二章小程序框架_逻辑层
第二章小程序框架_逻辑层 2.1 逻辑层小程序开发框架的逻辑层是基于JavaScript进行编写和实现的.在开发过程中写的所有代码,最终都被整合成一份JavaScript,在小程序启动的时候开始执 ...
微信小程序零基础入门【小程序的下载、安装与首项目配置】
目录第一步.注册小程序开发账号第二步.下载并安装微信小程序第三步.首次创建小程序第一步.注册小程序开发账号 (1)点击注册按钮微信公众平台点击该链接进入微信公众号平台,点击右上角注册按钮, ...
php+实现群发微信模板消息_使用php实现微信小程序发送模板消息（附代码）
本篇文章给大家带来的内容是关于使用php实现微信小程序发送模板消息(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本章将会简单说一下微信小程序的模板消息发送,相对来说比较简 ...
微信小程序零基础快速入门
一.小程序开发资源介绍此部分内容介绍一些现有的项目,可以下载下来学习,看看别人开发如何使用各个组件,如何美化各个页面. ①小程序官方demo ②网友整理资源1 ③网友整理资源2 ④下面为UI组件库 ...
微信小程序推送模板教程附源码
无聊的时候玩一下小功能踩踩坑首先模板推送需要准备一些材料准备材料:1)公众号|小程序,添加选择的模板消息,2)在设置>开发设置页面,开通消息模板功能:如: 如果还没模板素材的请新建一 ...

情侣积分微信小程序零基础开发教程（附代码及开发指南）