微信小程序

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事件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容