云笔记小程序的实现

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，一经查实，立即删除！

相关文章

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…
阅读更多...
电商技术揭秘二十三：智能物流优化与效率提升

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

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台…
阅读更多...
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 …
阅读更多...
事务隔离级别的无锁实现方式 -- MVCC

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

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

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

摘要：文章介绍了一种采用单片机和安卓移动设备构建移动物联网应用开发实训系统的方法。并基于该系统完成了实训的项目设计，实现了通过手机远程获取单片机上的传感器数据以及远程控制单片机上的开关设备等典型的物联网应用。 关键词：单片机；传感器；安卓应用开发 1 物联网应…
阅读更多...
伺服驱动器算法入门的一些建议和书籍推荐

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

希望此篇文章对想从事伺服驱动器的研发工作的一些刚刚入门的同学一些建议。 针对伺服驱动器的研发工作涉及的知识和需要掌握的技能主要分为两部分&#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…
阅读更多...
陇剑杯 ios 流量分析

陇剑杯 ios 流量分析

陇剑杯 ios 流量分析 ios 一位ios的安全研究员在家中使用手机联网被黑&#xff0c;不仅被窃密还丢失比特币若干&#xff0c;根据流量分析完成ios1-8 ios 1 ios-1&#xff1a;黑客所控制的C&C服务器IP是_____________。 什么是C&C服务器? C&C&#xff08;Com…
阅读更多...
MATLAB GUI图形化界面设计计算器

MATLAB GUI图形化界面设计计算器

MATLAB GUI界面设计教程可以帮助用户创建交互式的图形用户界面&#xff0c;以简化与MATLAB程序的交互过程。以下是一个简化的教程&#xff0c;指导你如何进行MATLAB GUI界面设计&#xff1a; 1. 启动GUIDE或App Designer GUIDE&#xff1a;在MATLAB命令窗口中输入guide命令&a…
阅读更多...
44.HarmonyOS鸿蒙系统 App(ArkUI)栅格布局介绍

44.HarmonyOS鸿蒙系统 App(ArkUI)栅格布局介绍

栅格布局是一种通用的辅助定位工具&#xff0c;对移动设备的界面设计有较好的借鉴作用。主要优势包括&#xff1a; 提供可循的规律&#xff1a;栅格布局可以为布局提供规律性的结构&#xff0c;解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数&#xff0c;…
阅读更多...
我五年减脂历程中应用的数据指标

我五年减脂历程中应用的数据指标

对于减脂&#xff0c;理论说的再多无益&#xff0c;关键是要行动起来。只有坚持过&#xff0c;才有资格说&#xff1a;我尽力了。 每天跑步5公里&#xff0c;是改变一个人体态的分水岭。记住是每天&#xff0c;不管春夏秋冬、酷暑寒雪。 我常在想&#xff0c;如何才能变成一个更…
阅读更多...
【JavaEE多线程】理解和管理线程生命周期

【JavaEE多线程】理解和管理线程生命周期

目录 ThreadThread类的常用构造方法Thread类的常见属性启动一个线程-start()终止一个线程等待一个线程-join()线程的状态 Thread Thread 就是在 Java 中&#xff0c;线程的代言人。系统中的一个线程&#xff0c;就对应到 Java 中的一个 Thread 对象。围绕线程的各种操作&#…
阅读更多...
Java 设计模式系列：模板方法模式

Java 设计模式系列：模板方法模式

简介 模板方法模式是一种行为型设计模式&#xff0c;它定义一个操作中的算法骨架&#xff0c;将一些步骤推迟到子类中。模板方法模式使得子类可以不改变一个算法的结构&#xff0c;即可重定义该算法的某些特定步骤。 在模板方法模式中&#xff0c;抽象类中定义了一系列基本操…
阅读更多...
申请OV SSL证书的好处

申请OV SSL证书的好处

什么是OV SSL证书&#xff1a; OV SSL证书也叫组织验证型SSL证书&#xff0c;是众多SSL证书当中最受广大用户欢迎的一种类型。因为它不仅需要验证域名的所有权&#xff0c;还需要对企业的相关身份信息进行审核&#xff0c;确保企业是一个真实存在的合法实体。除了这些&#xf…
阅读更多...
Rust取代C++? 保守了！关于未来的讨论

Rust取代C++? 保守了！关于未来的讨论

当各种平台在大肆讨论rust即将取代C/C的时候&#xff0c;已经有不少人意识到这种讨论是聒噪而无聊的。笔者和老师们通过周末茶会的讨论&#xff0c;认为现今世界常见的大多数编程语言都会在50-80年内被AI取代&#xff0c;同时供人类审计而诞生的“审计语言”会兴起。届时计算机…
阅读更多...
华为机考入门python3--（15）牛客15-求int型正整数在内存中存储时1的个数

华为机考入门python3--（15）牛客15-求int型正整数在内存中存储时1的个数

分类&#xff1a;二进制 知识点&#xff1a; int转二进制 binary bin(n)[2:] 题目来自【牛客】 def count_ones_in_binary(n): # 将输入的整数转换为二进制字符串 # bin(n)为0b11011binary bin(n)[2:]# 初始化计数器为0 count 0 # 遍历二进制字符串的每一位 fo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023