微信小程序开发笔记(一)

1、展示本地存储能力

    const logs = wx.getStorageSync('logs') || []// 把当前时间戳插入到数组最前面logs.unshift(Date.now())// 将数组转换为字符串并输出到命令行console.log(logs.toString())wx.setStorageSync('logs', logs)

2、常用代码

// 获取应用实例
const app = getApp()// 引用logs.js
const util = require('../../utils/util.js')// 更新数据Page({data: {logs: []},onLoad() {this.setData({logs:[]})})}
})

3、关于map

this.setData({logs: (wx.getStorageSync('logs') || []).map(log => {return util.formatTime(new Date(log))})})

4、通用方法formatTime封装和导出

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}const formatNumber = n => {n = n.toString()return n[1] ? n : `0${n}`
}module.exports = {formatTime
}// 需要的地方引入logs.js
const util = require('../../utils/util.js')
// 使用formatTime
util.formatTime(new Date())

5、

==操作符会先将两边的值进行强制类型转换再比较是否相等，而===操作符不会进行类型转换。==操作符只要求比较两个值是否相等，而===操作符不仅要求值相等，而且要求类型相同。!=和!==的区别也是类似的，!=号会做强制类型转换，而!==不会。

// true
55 == '55'
// false
55 === '55'

6、列表渲染wx:for

  //jsdata: {week: [1,2,3,4,5,6,7], }// wxml<block wx:for="{{week}}"><view><text>{{index}}:星期{{item}}</text></view></block>在开发中，我们经常会遇到展示列表数据的需求，在小程序中需要使用标签 wx:for / wx:for-index / wx:for-item 来实现相关功能，运行效果如下所示。
wx:for="{{mainListViewData}}"        ： 定义循环，数组名称为 mainListViewData
wx:for-index="mainListViewDataIndex" ： 定义索引值的名称 mainListViewDataIndex
wx:for-item="mainListViewDataItem"   ： 定义索引值对应项名称 mainListViewDataItem

7、模板使用示例

<!--
item: {index: 0,msg: 'this is a template',time: '2016-06-18'
}
--><template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template><template is="msgItem" data="{{...item}}"/><!-- 输出
0: this is a template Time: 2016-06-18
-->

动态加载模板示例

<template name="odd"><view> odd </view>
</template><template name="even"><view> even </view>
</template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block><!-- 输出
odd
even
odd
even
odd
-->

微信小程序开发笔记(一)相关推荐

微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
微信小程序开发笔记进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录一.前言二.onfire.js介绍三.API介绍四.实例应用五.onfire源码六.实例源码一.前言微信小程序开发笔记--导读二.onfire.js介绍一个简单实用的事件订 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录一.前言二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署四.小程序调用 4. ...
微信小程序开发笔记（1.1）滚动选择器picker的使用
微信小程序开发笔记(1.1)滚动选择器picker的使用前言滚动选择器picker 普通选择器多列选择器时间选择器日期选择器省市区选择器前言最近被拉来做小程序,因为时间比较赶,其他方面 ...
微信小程序开发笔记—设置页面密码
文章目录一.功能概述二.实现效果三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...

微信小程序开发笔记(一)

微信小程序开发笔记(一)相关推荐

最新文章

热门文章