微信小程序
1、安装
官网链接 https://mp.weixin.qq.com/wiki
2、目录结构介绍
框架程序包括一个描述整体程序的app 和多个描述各自页面的page
3、app.json配置项列表
3.1pages配置
接受一个数组,每一项都是字符串,来指定小程序有哪些页面组成。每一项代表对应页面的路径,
数组的第一项代表小程序的初始页面。小程序中新增或减少页面,都需对pages数组进行修改
{
"pages":[
"pages/index/index"//初始页面拓展名不用写
"pages/logs/logs" //拓展名不用写,新建页面时在这里注册后保存,即会在项目目录下生成该页面文件了
]
}
3.2 window配置
用于设置小程序的状态栏、导航条、标题、窗口背景颜色等
3.3 tabBar
数组,最少2个,最多5个,按数组的序列排列
还可以通过position属性来设置tabBar的位置,有bottom和top两种
list参数是一个数组,数组中每一项都是一个对象,其属性值如下
3.4 networkTimeout
可以设置各种网络请求的超时时间
3.5 debug
4 page.json
5 app.js
定义App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等
生命周期函数有
一般在onHide时要添加一个提示框 确认是否要退出
6 注册页面
onShareAppMessage在api中查看用法
7 路由
页面跳转页面有api和组件两种方式
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
8 模块化开发
在根目录新建js文件夹或文件,在里面定义复用性较高的函数采用以下方式暴露出去
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
在需要的地方采用以下方式定义并且使用
var common = require('common.js') // 此处暂不支持绝对路径
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
6 点击事件 https://my.oschina.net/kaiyuanlong/blog/1620098
事件处理函数 点击是 bindtap (阻止冒泡事件的发生,其实很简单,直接把bindtap改为catchtap即可)
场景:最近开发微信小程序时候遇到了点击页面中的元素,js捕捉点击事件,并获取该元素的一些属性(比如我自定义了一个author="季兰兰"),那么如何快速获取这个属性呢?其实首先要改变一下写法,用【data-】开头,元素属性即为data-author="季兰兰",并且绑定一个点击事件,bindtap='getAuthor'。
wxml部分
<view data-author='季兰兰' bindtap='getAuthor'>获取作者名称</view>
接下来重点来了 js部分
getAuthor : function(e){
console.log(e.currentTarget.dataset.author);//打印季兰兰
//看一下e对象的值
console.log(e);
注意:里面有两个对象存在我们要获取的内容 一个是target一个是currentTarget 区别简单来说是
e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。
MDN中对target的解释为,一个触发事件的对象的引用, 当事件处理程序在事件的冒泡或捕获阶段被调用时。
而对于currentTarget,它指的是当事件遍历DOM时,标识事件的当前目标。它总是引用事件处理程序附加到的元素,而不是event.target,它标识事件发生的元素。
7 swiper 滑块视图容器
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
注:current属性 表示当前所在滑块的 index
bindchange属性 当current 改变时会触发 change 事件,event.detail = {current: current, source: source} 通过e.detail.current取到新的current值
其中只可放置<swiper-item/>组件,否则会导致未定义的行为。
8 scroll-view组件
小程序编辑的页面有时候能整体随着手的滑动而左右偏移,这样体验不好,可以在最外面套一个scroll-view组件(如果竖向要滚动须设置他的高度) 再在外面套一个相对定位top bottom left right 都为0的盒子 页面就不会左右动了
9 微信小程序使用navigateTo数据传递json的实例(坑)
https://blog.csdn.net/a690197843/article/details/78567556
http://www.jb51.net/article/124573.htm
10小程序在数据绑定中取整
后面加|Int 过滤就可以了
<view>{{aaa/bbb|Int}}</view>
11小程序遇到push问题
arr1.push(arr2)
当中arr1需要缓存并且是动态获取到的 第一次没有缓存记录 所以它不是数组,arr2是字符串
只需在获取缓存数据时判断得到的是不是数组
例如
var History = wx.getStorageSync('history')||[]
通过 ES6 的 模板字符串 和 属性名表达式,注意在项目配置里面开启ES6 转 ES5。
12小程序遇到无法更改data里单个数组的问题
13下拉刷新 上拉加载
下拉刷新
1、调用系统的API,系统有提供下拉刷新的API接口 onPullDownRefresh/
2、监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个bindscrolltoupper属性吗?当滚动到顶部/左边,会触发 scrolltoupper 事件,所以我们可以利用这个属性,来实现下拉刷新功能。
上拉加载
1、调用系统的API onReachBottom
2、监听scroll-view,bindscrolltolower滑动到底部的监听
注意:在小程序中,scroll-view组件 与 onPullDownRefresh不能同时使用,一起使用,下拉scroll-view不能触发onPullDownRefresh事件。