云笔记小程序的实现

1.前言

云笔记, 是基于HotApp小程序统计云后台提供的api接口开发的一个微信小程序。

2.功能

  • 离线保存笔记

  • 云端数据同步, 更换了设备也可以找到以前的笔记

  • 接入了好推二维码提供的数据统计工具, 可以到平台上查看用户分析、留存分析、事件分析。

3.界面效果

***HotApp云笔记，基于HotApp小程序统计云后台

***免费云后台申请地址 https://weixin.hotapp.cn/cloud

***API 文档地址：https://weixin.hotapp.cn/api

四、代码实现

{"pages": ["pages/index/index","pages/feedback/index","pages/edit/index","pages/create/index"],"window": {"navigationBarBackgroundColor": "#ff9b6e","navigationBarTitleText": "HotApp云笔记","navigationBarTextStyle": "black","backgroundTextStyle": "light","backgroundColor": "#efeff4","enablePullDownRefresh": true},"tabBar": {"color": "#b3b3b3","selectedColor": "#fc8e5d","backgroundColor": "#f5f5f7","borderStyle": "white","position": "bottom","list": [{"pagePath": "pages/index/index","text": "记事本","iconPath": "images/icon1.png","selectedIconPath": "images/sicon1.png"},{"pagePath": "pages/feedback/index","text": "反馈","iconPath": "images/icon2.png","selectedIconPath": "images/sicon2.png"}]},"sitemapLocation": "sitemap.json"
}
<!--/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api*/-->
<!--index.wxml-->
<view class="container"><!--写笔记--><view class='col'><view class='item add_box'  bindtap="onNewItem"><image class="add_bg" src="../../images/add.png" style="width:120rpx;height:120rpx;"></image></view> <!--没有笔记时的提示--><block wx:if="{{items.length < 1}}"><view class='tips'><view class='tips_box'><image class='tips_icon' src="../../images/tips_icon.png"style="width:70rpx;height:70rpx;"></image></view><view class='tips_txt'>点此添加新记事本</view></view></block></view><!--笔记列表--><block wx:for="{{items}}"><view class="col" wx:if="{{ item.state != 3 }}"><view class='item notepad {{item.class}}' data-key="{{item.key}}" bindtap="onEditItem"><view class='content'><view class='txt'>{{item.value.title}}</view></view><view class='bottom'><view class='txt'>{{item.year}} {{item.month}} {{item.date}}</view></view></view></view></block>
</view>

/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
*/
var app = getApp();Page({data: {items: [],},/*** 首次渲染事件*/onShow: function() {this.setData({items: []});// 获取数据var that = this;app.globalData.hotapp.wxlogin(function(res) {that.onLoadData();});},/*** 新增笔记事件*/onNewItem: function(event) {wx.navigateTo({url: "../create/index"})},/*** 编辑笔记事件*/onEditItem: function(event) {wx.navigateTo({url: '../edit/index?key=' + event.currentTarget.dataset.key})},/*** 获取数据事件*/onLoadData: function() {var that = this;app.getItems(function(items) {that.setData({items: items});});},/*** 下拉刷新事件, 数据同步*/onPullDownRefresh: function() {wx.showToast({title: '正在同步数据',icon: 'loading'});// 临时变量var tempData = this.data.items;var that = this;// 先检查版本, 如果和服务器版本不同, 则需要从服务器拉取数据app.checkVersion(function(shouldPullData) {if (shouldPullData) {var filters = {prefix: app.globalData.hotapp.getPrefix('item')};// 从服务器拉取所有数据app.globalData.hotapp.searchkey(filters, function(res) {if (res.ret == 0) {// 拉取成功, 更新版本号app.updateVersion(function(success) {if (success) {// 更新版本号之后把本地数据和服务器数据合并去重tempData = that.syncServerDatatoLocal(tempData, res.data.items);tempData.forEach(function(item, index, arr) {arr[index] = app.formatItem(item);arr[index].state = 2;});// 更新视图数据that.setData({items: tempData});// 把合并好的数据存缓存wx.setStorageSync('items', tempData);that.syncLocalDataToServer(tempData);}});}}); } else {// 版本号和服务器相同, 则不需要从服务器上拉取数据, 直接同步数据到服务器that.syncLocalDataToServer(tempData);}});},/*** 将本地数据同步到服务器*/syncLocalDataToServer: function(data) {var that = this;// 遍历所有的数据data.forEach(function(item, index, items) {app.globalData.hotapp.replaceOpenIdKey(item.key, function(newKey) {if (newKey) {item.key = newKey;// 如果还有数据没有同步过, 则调用post接口同步到服务器if (item.state == 1) {app.globalData.hotapp.post(item.key, item.value, function(res) {if (res.ret == 0) {// 同步成功后更新状态, 并存缓存item.state = 2;item = app.formatItem(item);that.setData({items: items});wx.setStorageSync('items', items);}});}// 如果数据被删除过, 则调用delete接口从服务器删除数据if (item.state == 3) {app.globalData.hotapp.del(item.key, function(res) {if (res.ret == 0 || res.ret == 103) {// 服务器的数据删除成功后, 删除本地数据并更新缓存items.splice(index, 1);that.setData({items: items});wx.setStorageSync('items', items);}});}} else {return;}})});},/*** 将服务器的数据同步到本地*/syncServerDatatoLocal: function(localData, serverData) {var that = this;// 通过hash的性质去重, 服务器数据覆盖本地数据// 但是要保留本地中状态为已删除的数据// 删除的逻辑不在这里处理var localHash = new Array();localData.forEach(function(item) {localHash[item.key] = item;});var serverHash = new Array();serverData.forEach(function(item) {serverHash[item.key] = item;});// 先把服务器上有的数据但是本地没有的数据合并serverData.forEach(function(item) {var t = localHash[item.key];// 有新增的数据if (!t) {localHash[item.key] = item;}// 有相同的key则以服务器端为准if (t && t.state != 3) {item.state = 2;item = app.formatItem(item);localHash[item.key] = item;}});// 然后再删除本地同步过的但是服务器上没有的缓存数据(在其它设备上删除过了)localData.forEach(function(item, index, arr) {var t = serverHash[item.key];if (!t && item.state == 2) {console.log(item);delete localHash[item.key];}});// 将hash中的数据转换回数组var result = new Array();for (var prob in localHash) {result.push(localHash[prob]);}// 按时间排序result.sort(function(a, b) {return a.create_time < b.create_time;});console.log(result);return result;}
})

五、源码下载

云笔记小程序实现.zip

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/816704.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IDE：常见的集成开发环境

IDE：常见的集成开发环境

1、QT-Creator Qt Creator是跨平台的 Qt IDE&#xff0c; Qt Creator 是 Qt 被 Nokia 收购后推出的一款新的轻量级集成开发环境&#xff08;IDE&#xff09;。此 IDE 能够跨平台运行&#xff0c;支持的系统包括 Linux&#xff08;32 位及 64 位&#xff09;、Mac OS X 以及 Win…
阅读更多...
ZYNQ-Vitis(SDK)裸机开发之（四）PS端MIO和EMIO的使用

ZYNQ-Vitis(SDK)裸机开发之（四）PS端MIO和EMIO的使用

目录 一、ZYNQ中MIO和EMIO简介 二、Vivado中搭建block design 1.配置PS端MIO&#xff1a; 2.配置PS端EMIO&#xff1a; 三、Vitis中新建工程进行GPIO控制 1. GPIO操作头文件gpio_hdl.h&#xff1a; 2.GPIO操作源文件gpio_hdl.c&#xff1a; 3.main函数进行调用 例程开发…
阅读更多...
ssm049基于Vue.js的在线购物系统的设计与实现+vue

ssm049基于Vue.js的在线购物系统的设计与实现+vue

在线购物系统 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于在线购物系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了在线购物系统&#xff0c;它彻底改…
阅读更多...
力扣 | 24. 两两交换链表中的节点

力扣 | 24. 两两交换链表中的节点

两两交换链表中的节点 给定一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后的链表。 你不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的进行节点交换。 输入&#xff1a;head 1->2->3->4->5->NULL 输出&#xff1a;2->1-&g…
阅读更多...
rust 写命令行程序，如何控制字符显示的水平位置？

rust 写命令行程序，如何控制字符显示的水平位置？

在Rust中&#xff0c;要控制字符在CMD终端上显示的水平位置&#xff0c;你通常需要使用终端控制序列。这些控制序列允许你移动光标、更改文本颜色、清除屏幕等。 对于Windows CMD终端&#xff0c;其支持的控制序列相对有限&#xff0c;但你可以使用基本的控制序列来移动光标。…
阅读更多...
Leetcode 3108. Minimum Cost Walk in Weighted Graph

Leetcode 3108. Minimum Cost Walk in Weighted Graph

Leetcode 3108. Minimum Cost Walk in Weighted Graph 1. 解题思路2. 代码实现 题目链接&#xff1a;3108. Minimum Cost Walk in Weighted Graph 1. 解题思路 这一题一开始被吓到了&#xff0c;因为想的是要求出query当中任意两个点的一个联通通路&#xff0c;使得cost最小…
阅读更多...
电商技术揭秘二十三：智能物流优化与效率提升

电商技术揭秘二十三：智能物流优化与效率提升

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台…
阅读更多...
商用无线通信：信道带宽

商用无线通信：信道带宽

GSM: 200 kHzWCDMA: 5 MHzcdma2000 1X: 1.25 MHzTD-SCDMA: 1.6 MHzLTE: 1.4 MHz /3 MHz /5 MHz /10 MHz / 15 MHz /20 MHz5G&#xff08;Rangel 频段&#xff09;&#xff1a;5 MHz/15 MHz/ 20 MHz/30 MHz/40 MHz/50 MHz/60 MHz/ 70 MHz/80 MHz/90 MHz/100 MHz5G (Range2 Hif):…
阅读更多...
web3项目自动连接小狐狸以及小狐狸中的各种“地址”详解

web3项目自动连接小狐狸以及小狐狸中的各种“地址”详解

刚做web3的时候&#xff0c;比较迷糊的就是人们口中说的各种地址&#xff0c;小狐狸钱包地址&#xff0c;私钥地址&#xff0c;跳转地址&#xff0c;接口地址&#xff0c;交易地址&#xff0c;等等XX地址&#xff0c;常常感觉跟做链的同事们说话不在一个频道。 这一小节&#x…
阅读更多...
Linux的学习之路：10、进程（2）

Linux的学习之路：10、进程（2）

摘要 本章主要是说一下fork的一些用法、进程状态、优先级和环境变量。 目录 摘要 一、fork 1、fork的基本用法 2、分流 二、进程状态 三、优先级 四、环境变量 1、常见环境变量 2、和环境变量相关的命令 3、通过代码如何获取环境变量 五、导图 一、fork 1、fork…
阅读更多...
《自动机理论、语言和计算导论》阅读笔记：p172-p224

《自动机理论、语言和计算导论》阅读笔记：p172-p224

《自动机理论、语言和计算导论》学习第 8 天&#xff0c;p172-p224总结&#xff0c;总计 53 页。 一、技术总结 1.Context-Free Grammar(CFG) 2.parse tree (1)定义 p183&#xff0c;But perhaps more importantly, the tree, known as a “parse tree”, when used in a …
阅读更多...
【面经】4月9日 腾讯/csig/腾讯云/一面/1h30m

【面经】4月9日 腾讯/csig/腾讯云/一面/1h30m

自我介绍 项目&#xff1a; 介绍项目 你这个项目和别人已有系统的项目相比&#xff0c;优势在哪里&#xff1f;如果别人系统的数据要迁到你这个系统里来&#xff0c;应该怎么做&#xff1f; 服务部署有了解吗&#xff1f;一个节点如果只能部署一个服务不是很浪费吗&#xff1f…
阅读更多...
ElasticSearch的使用场景

ElasticSearch的使用场景

一 什么是ElasticSearch Elasticsearch 是位于 Elastic Stack 中心的分布式搜索和分析引擎。Logstach 和 Beats 促进采集、合计以及充实你的数据并在 Elasticsearch 中存储它们。Kibana 允许你去交互式的探索、可视化和共享对数据的见解&#xff0c;以及监视这个栈&#xff08…
阅读更多...
【2024年5月备考新增】《软考真题分章练习（含答案解析） - 19 信息化基础知识 （1）》

【2024年5月备考新增】《软考真题分章练习（含答案解析） - 19 信息化基础知识 （1）》

1、区别于传统资产，数据资产具有的独特特征是（）。 A.共享性 B.时效性 C.增值性 D.量化性 【答案】A 【解析】传统资产一般不具有共享性，比如钱。 3、信息技术发展的总趋势是从典型的技术驱动发展模式向应用驱动与技术驱动相结合的模式转变。（） 不属于信息技术发展趋势和…
阅读更多...
事务隔离级别的无锁实现方式 -- MVCC

事务隔离级别的无锁实现方式 -- MVCC

MVCC的全称是Multiversion Concurrency Control(多版本并发控制器)&#xff0c;是一种事务隔离级别的无锁的实现方式&#xff0c;用于提高事务的并发性能&#xff0c;即事务隔离级别的一种底层实现方式。 在了解MVCC之前&#xff0c;我们先来回顾一些简单的知识点&#xff1a;…
阅读更多...
基于单片机和安卓平台的移动物联网应用开发实训系统设计

基于单片机和安卓平台的移动物联网应用开发实训系统设计

摘要：文章介绍了一种采用单片机和安卓移动设备构建移动物联网应用开发实训系统的方法。并基于该系统完成了实训的项目设计，实现了通过手机远程获取单片机上的传感器数据以及远程控制单片机上的开关设备等典型的物联网应用。 关键词：单片机；传感器；安卓应用开发 1 物联网应…
阅读更多...
10.list的模拟实现（普通迭代器和const迭代器的类模板）

10.list的模拟实现（普通迭代器和const迭代器的类模板）

1. list的介绍及使用 1.1 list的介绍 list的文档介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过…
阅读更多...
伺服驱动器算法入门的一些建议和书籍推荐

伺服驱动器算法入门的一些建议和书籍推荐

希望此篇文章对想从事伺服驱动器的研发工作的一些刚刚入门的同学一些建议。 针对伺服驱动器的研发工作涉及的知识和需要掌握的技能主要分为两部分&#xff0c;第一是原理部分、第二是工程实践部分。原理部分的学习在此主要推荐大家查看一些入门书籍&#xff0c;本文章中也对书籍…
阅读更多...
【opencv】示例-travelsalesman.cpp 使用模拟退火算法求解旅行商问题

【opencv】示例-travelsalesman.cpp 使用模拟退火算法求解旅行商问题

// 载入 OpenCV 的核心头文件 #include <opencv2/core.hpp> // 载入 OpenCV 的图像处理头文件 #include <opencv2/imgproc.hpp> // 载入 OpenCV 的高层GUI(图形用户界面)头文件 #include <opencv2/highgui.hpp> // 载入 OpenCV 的机器学习模块头文件 #includ…
阅读更多...
Leetcode215_数组中的第K个最大元素

Leetcode215_数组中的第K个最大元素

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必…
阅读更多...
最新文章

Copyright @ 2022~2023