微信小程序学习笔记
长沙火山
2015年做个有梦想、肯努力的青年。
展开
-
微信小程序开发:生命周期
一、应用的生命周期1、系统函数说明App()函数用来注册一个小程序,接收一个object函数,其指定小程序的生命周期函数等。此函数位于app.js文件中,整个微信小程序中只有一个。属性作用说明onLaunch监听小程序初始化小程序初始化完成时触发,全局只触发一次onShow监听小程序启动或切换前台小程序启动或从后台进入前台时触发onHide监听小程...原创 2020-03-10 14:13:48 · 1082 阅读 · 0 评论 -
微信小程序开发:变量与作用域
一、全局变量全局变量是整个微信小程序所有的页面都可以访问的变量,定义在app.js文件中的globalData里面。//app.jsApp({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx....原创 2020-03-10 14:13:00 · 1162 阅读 · 0 评论 -
微信小程序开发:npm的使用
这里以导入小程序国密算法库为例说明npm的使用。1、安装国密算法库sm-crypto打开终端,cd到小程序项目的根目录,在终端里执行以下命令:npm install --save miniprogram-sm-crypto2、在项目设置中使用npm模块在微信小程序开发者工具中,设置–>项目设置–>使用npm模块[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直...原创 2020-03-10 14:09:58 · 3842 阅读 · 0 评论 -
JS 数组操作
一、数组去重Array.prototype.unique = function() { var n = []; // 存放已遍历的满足条件的元素 for (var i = 0; i < this.length; i++) { // indexOf()判断当前元素是否已存在 if (n.indexOf(this[i]) == -1) n.pus...原创 2018-03-21 20:10:13 · 287 阅读 · 0 评论 -
9、微信小程序学习: wepy-com-toast的使用
小程序中并不能像H5一样直接使用alert弹出消息提示,因此可以选择使用 wx.showToast 的API进行消息提示,但是官方只支持success 和 loading 两种样式。重新写一个 toast 组件成本略高,因此考虑直接使用现成的 wepy-com-toast 组件。使用方法如下:1 . 安装组件npm install wepy-com-toast --save2 .无缓存编译wep...原创 2018-03-21 11:40:00 · 2968 阅读 · 0 评论 -
7、微信小程序学习: request网络请求
<!--index.wxml--><view> <textarea>{{textdata}}</textarea></view><button bindtap='RequestData' value='Button'>request</button>//index.js//获取应用实例cons原创 2018-02-24 11:29:13 · 339 阅读 · 0 评论 -
6、微信小程序学习: 模版的使用
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。一、定义模板使用 name 属性,作为模板的名字。然后在内定义代码片段,如:<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view></t原创 2018-02-22 17:42:15 · 346 阅读 · 0 评论 -
8、微信小程序学习: 下拉刷新和上拉加载
微信小程序提供了下拉刷新和上拉加载的API。一、下拉刷新调用系统的API,系统有提供下拉刷新的API接口 1、需要在app.json里添加允许下拉刷新的属性:{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "nav原创 2018-02-28 12:06:02 · 766 阅读 · 0 评论 -
CSS 子元素在父元素中垂直居中
父元素设置为相对布局,子元素设置为绝对布局,并且设置上下左右边距都为0,设置子元素的宽度为500px,这样就是子元素占据了整个容器,此时margin设置为auto才起作用,具体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style>原创 2018-01-27 10:55:34 · 3800 阅读 · 0 评论 -
5、微信小程序学习: Tabbar的实现
1、底部TabBar的实现在app.json 里面添加代码:"tabBar":{ "color":"#999999", "selectedColor":"#000000", "borderStyle":"black", "backgroundColor": "#ffffff", "list":[{ "pagePath":"pages/login/l原创 2018-01-18 09:46:00 · 879 阅读 · 0 评论 -
CSS 实现三级导航目录
html lang="en">head> meta charset="UTF-8"> title>测试title> style> *{ margin:0px; padding:0px; } .page { width:100%; hei原创 2018-01-25 17:08:32 · 3625 阅读 · 0 评论 -
2、微信小程序学习:页面布局
一、CSS盒模型在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。1、块级元素a{display:block;}块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行) 2、元素的高度、宽度、行高以及顶和底边距都可设置原创 2018-01-08 09:56:51 · 995 阅读 · 0 评论 -
4、微信小程序学习:Flex布局
一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}二、容器的属性以下6个属性设置在容器上flex-directionflex-wrap原创 2018-01-16 12:06:11 · 345 阅读 · 0 评论 -
3、微信小程序学习:加减控件
view class='stepper'> text class='{{minusStatus}}' type='number' bindtap='bindMinus'>-text> input bindinput='bindManual' value='{{num}}'>input> text bindtap='bindPlus'>+text>view>/**index.原创 2018-01-10 11:09:05 · 9327 阅读 · 0 评论 -
1、微信小程序学习:基本控件的使用
最近公司app客户端没有新的需求了,接下来的工作任务是学习微信小程序的开发,先从最基本的控件开始学习。一、视图容器1、view的使用wxml文件中的代码://创建一个view,class='style'是引用wxss文件中的样式<view class='style'>Hello World</view>wxss文件中的代码:/**view的样式布局 * background-color:背景颜色原创 2017-12-27 10:48:20 · 4885 阅读 · 0 评论