微信小程序 - 实战小案例 - 简易记事本
多项技能,好像也不错。学习一下微信小程序。
教程:https://mp.weixin.qq.com/debug/wxadoc/dev/
简介:一套用来开发在手机微信上运行的app框架,不用安装
组成:结构文件wxml、样式文件wxss、js文件
备注:wxml 和html是一样的,除了部分便签不一致;wxss和css是一样的;js同理
说明:支持双向数据绑定、ES6语法,遵循commonjs规范管理模块
首先在教程(https://mp.weixin.qq.com/debug/wxadoc/dev/)中找到工具,然后从“微信开发者工具”链接进入,下载开发者工具,之后安装。安装好后,用手机微信确定登录后,就可以创建项目了。如何创建可参照简易教程。
简易记事本 - 主要功能:
1. 列表展示
2. 新增/编辑
数据存储在storage中
简易记事本:
目录结构 | 列表 | 新增/编辑 |
![]() |
![]() |
![]() |
在目录结构中的app.json中配置路由及导航条的基本设置,其中pages数组中的第一个就是入口的路由页面:
{
"pages": [
"pages/list/list", // 入口路由页面
"pages/add/add"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "skyblue",
"navigationBarTitleText": "简易记事本",
"navigationBarTextStyle": "#fff"
}
}
下面展示主要代码:
list.wxml中的内容如下,add.wxml同理,就不展示了。至于wxss和css一样,也不展示了。
<!--pages/list/list.wxml-->
<view class='page'>
<!-- 每一条文字 -->
<scroll-view scroll-y='true' class='lists'>
<block wx:for="{{lists}}" wx:key="*this.id">
<view class="list-i" bindtap="edit" data-id="{{item.id}}">
<view class="content">{{item.content}}</view>
<view class='time'>创建时间:{{item.time}}</view>
</view>
</block>
</scroll-view>
<!-- 添加一条文字的按钮 -->
<view class='add' bindtap='add'>
<image src='../../img/edit.png'></image>
</view>
</view>
设置storage使用:wx.setStorageSync(key, data), 获取storage数据使用的是wx.getStorageSync(key)。
备注:还有一个wx.getStorageInfoSync(),这个是获取storage的信息,而不包含设置的key的具体内容。我第一次就用错了。
// list.js 初始化列表数据
function initData (page) {
var arr = wx.getStorageSync('txt');
if (arr.length) {
arr.forEach((item, i) => {
var t = new Date(Number(item.time));
item.time = util.dateFormate(t);
})
page.setData({
lists: arr
})
}
}
// add.js 获取根据url中的id获取编辑信息
function getData(id, page) {
var arr = wx.getStorageSync('txt');
if (arr.length) {
arr.forEach((item) => {
if (item.id == id) {
page.setData({
id: item.id,
content: item.content
})
}
})
}
} // 设置填写的信息,分编辑、新增
function setValue(page) {
var arr = wx.getStorageSync('txt');
var data = [], flag = true;
if(arr.length) {
arr.forEach(item => {
if(item.id == page.data.id) {
item.time = Date.now();
item.content = page.data.content;
flag = false;
}
data.push(item);
})
}
if (flag) {
data.push(page.data);
}
wx.setStorageSync('txt', data);
}
小小的展示了以下,^_^
git项目地址是:https://github.com/ESnail/wx.git
微信小程序 - 实战小案例 - 简易记事本的更多相关文章
- 微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...
- 微信小程序实战之天气预报
原文:微信小程序实战之天气预报 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可 ...
- 微信小程序源码案例大全
微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 —— 微信小程序实战商城 ...
- [转]微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: ...
- [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...
- 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...
- 微信小程序实战 购物车功能
代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...
- 微信小程序实战之百思不得姐精简版
原文:微信小程序实战之百思不得姐精简版 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的A ...
随机推荐
- kbmmw 中简单返回 extjs 数据JSON
以前,我们通过自己写json 来返回数据表的内容.在delphi 10.2.2中,官方自带了一个FDBatchMoveJSONWriter1 来直接处理数据库内容.把结果推送到浏览器客户端. 今天我们 ...
- 用rpm命令安装定时器crontab
crontab -l command not found 准备以下安装包: ls -l总用量 1004-rw-r--r-- 1 root root 76296 10月 9 16:01 croni ...
- python学习之ansible api
Python API 2.0 从2.0的事情开始更复杂一些,但是你会得到更多离散和可读的类: #!/usr/bin/env python import json from collections im ...
- 2019.01.22 zoj3583 Simple Path(并查集+枚举)
传送门 题意简述:给出一张图问不在从sss到ttt所有简单路径上的点数. 思路: 枚举删去每个点然后把整张图用并查集处理一下,同时不跟sss和ttt在同一个连通块的点就是满足要求的点(被删去的不算). ...
- 假期训练七(hdu-2845 dp,hdu-1846,2188 巴什博奕)
题目一:传送门 思路:动态规划,从每一行来看,每次更新求出这一点的最大值,dp[i]=MAX(dp[i-1],dp[i]+dp[i-2]),不会出现 两个数字相邻的情况:先对行进行更新,再对列进行更新 ...
- logcat命令详解【二】
eclipse 自带的 LogCat 工具太垃圾了, 开始用 adb logcat 在终端查看日志; 1. 解析 adb logcat 的帮助信息 在命令行中输入 adb logcat --help ...
- orika实现对象复制
1.新建maven工程orika-demo,引入orika依赖,其中pom.xml如下 <?xml version="1.0" encoding="UTF-8&qu ...
- 添加wifi adb
https://blog.csdn.net/ouyang_peng/article/details/50370786 首先弄懂怎么设置adb wifi无线调试的功能,如下所示. 1. 手机端开启adb ...
- 触摸屏 adb调试
1.adb shell cat /proc/kmsg 这条命令肯定是要放在第一位的,可以打印内核信息,对应于驱动程序中的printk语句. 如果出现以下提示,说明权限不够,可以通过adb root获取 ...
- 20155205 《Java程序设计》0510课上实践博客
20155205 <Java程序设计>0510课上实践博客 一.教材代码检查-p98 未提交成功原因: 一开始在iterm中运行,但是结果出错,没有时间提交了.这个提交其实很简单,没有提交 ...