微信小程序 - 实战小案例

　　多项技能，好像也不错。学习一下微信小程序。

　　教程：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

转载于:https://www.cnblogs.com/EnSnail/p/7727842.html

微信小程序 - 实战小案例 - 简易记事本相关推荐

小程序 ajax 加载,小程序实战-小程序网络请求异步加载
最初看到小程序的网络请求的时候,尤其是演示示例中,userInfoReadyCallback这个函数更是一头雾水.其实并不怎么理解.一直很费解.网上各路大侠都有解释,但是就是,不知道是怎么个顺序,而我 ...
php小程序开发新闻,微信小程序实战程序简易新闻的制作方法
这篇文章主要讲述微信小程序实战程序简易新闻的制作方法的相关资料,需要的朋友可以参考下微信小程序实战项目: 简易新闻制作先看下效果: 实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的 ...
微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
微信小程序，引爆新热点！JEECG社区小程序实战培训，业内首发，实战干货！
<JEECG社区微信小程序实战开发培训> -- 业内首发,实战干货一.课程简介微信小程序实战开发 QQ交流群:131894955 点击链接加入群[微信小程序开发群]:https:// ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
微信小程序实战教程-闫涛-专题视频课程
微信小程序实战教程-38472人已学习课程介绍介绍微信小程序API,包括页面布局.网络交互.媒体文件.本地缓存.地理位置.WebSocket和传感器技术,后以翼健康为模板,开发一套 ...
微信小程序实战—快递查询
微信小程序实战-快递查询案例需求:输入快递单号,点击查询按钮即可查看快递信息 api:阿里云全国快递物流查询关键代码: 数据定义(index.js) data: {motto: 'Hello Wo ...
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文微信小程 ...

微信小程序 - 实战小案例 - 简易记事本

微信小程序 - 实战小案例 - 简易记事本相关推荐

最新文章

热门文章