微信小程序知识点总结（二）

一、swiper插件的使用

1、页面逻辑（xxxx.js）：

Page({data: {imgUrls: [{link: '/pages/index/index',url: '/images/001.jpg'}, {link: '/pages/list/list',url: '/images/002.jpg'}, {link: '/pages/list/list',url: '/images/003.jpg'}],indicatorDots: true, //小点indicatorColor: "white",//指示点颜色activeColor: "coral",//当前选中的指示点颜色autoplay: false, //是否自动轮播interval: 3000, //自动播放间隔时间duration: 3000, //滑动时间}

其中imgUrls是我们轮播图中将要用到的图片地址和跳转链接。

2、页面结构（xxxx.wxml）

<!--轮播图-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activeColor}}"><block wx:for="{{imgUrls}}"><swiper-item><navigator url="{{item.link}}" hover-class="navigator-hover"><image src="{{item.url}}" class="slide-image" width="355" height="200" /></navigator></swiper-item></block>
</swiper>

xxxx.wxss

.slide-image {width: 100%;
}

3、详细的参见官方文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

二、App、Page、Component等类的生命周期

1、app：

App({// 整个应用程序的入口onLaunch() {wx.login({success: res => console.log('登录', res.code)})},globalData: {userInfo: null,}
})

2、page

Page({data: { },onLoad: function (options) { },onReady: function () {},onShow: function () { },onHide: function () {},onUnload: function () {},onPullDownRefresh: function () { },onReachBottom: function () { },onShareAppMessage: function () { }
})

3、component

Component({properties: { },  // 父组件传递过来的属性data: { },  // 自有的状态数据ready: function(){ },   // 生命周期methods: { }  // 自有的方法
})

三、自定义cate组件

cate.wxml

<view class="cate"><textwx:for='{{list}}'class="cate_item {{value===item.cate?'on':''}}"wx:key='item'data-cate='{{item.cate}}'bindtap='tapClick'>{{item.cate_zh}}</text>
</view>

cate.wxss

.cate_item {padding: 0 10rpx;display: inline-block;border: 1rpx solid #ccc;line-height: 45rpx;
}
.cate_item.on {color: red;
}

cate.js

Component({properties: {list: {type: Array, value: [] },value: {type:String, value: ''}},methods: {tapClick(e) {// 父子组件事件通信// this.triggerEvent('input', e.target.dataset.cate)// model 双向绑定的写法this.setData({value: e.target.dataset.cate})}},// 生命周期lifetimes: {},pageLifetimes: {}
})

cate.json

{"component": true
}

使用自定义封装的cate插件

{"usingComponents": {"qf-cate": "/components/cate/cate"}
}

<qf-cate list='{{cateList}}' model:value='{{curCate}}'></qf-cate>

四、列表渲染

<blockwx:for="{{actList}}"wx:for-item="act"wx:key="act"wx:for-index="idx"
><view class="row"><text>{{idx+1}}</text><text>{{act.id*100}}</text><text>{{act.title}}</text></view>
</block>

五、条件渲染

<view wx:if='{{idx===1}}'>第一行文字</view>
<view wx:elif='{{idx===2}}'>第二行文字</view>
<view wx:elif='{{idx===3}}'>第三行文字</view>
<view wx:else>第四行文字</view>
<button bindtap='toggle'>切换</button><!-- 显示与隐藏、类似v-show -->
<view hidden='{{bol}}'>第十行文字</view>

六、动态样式

<view class="box {{bol?'box':'box2'}}"></view>
<view style='color:red;font-size:{{size+"rpx"}}'>动态样式文字</view>

七、事件绑定

xxxx.wxml

<view bindtap='clickOuter'><viewdata-msg='hello bind'bindtap='click1'>测试事件(bind)</view><view catchtap='click2'>测试事件(catch绑定)</view>
</view>

xxxx.js

Page({data: {},click1(e) {console.log('click1', e)console.log('arg', e.target.dataset.msg)},click2(e) {console.log('click2', e)},clickOuter(e) {console.log('outer', e)}
})

八、表单双向绑定

Page({data: {username: '小明',password: '123',},// 手动取值usernameChange(e) {console.log('e', e.detail.value)this.setData({username: e.detail.value})},submit() {const data = {username: this.data.username,password: this.data.password}console.log('提交', data)}
})

<view><input type="text" value='{{username}}' bindblur='usernameChange' /><input type="text" model:value='{{password}}' /><button bindtap='submit'>提交</button>
</view>

九、小程序路由跳转

<button bindtap='skipToTabPage'>跳转到Tab页</button>
<button bindtap='skipToNotTabPage'>跳转到非Tab页</button>

Page({// 跳转到Tab页，使用switchTab，不能传参skipToTabPage() {wx.switchTab({url: '/pages/listen/listen'})},// 跳转到非Tab页，使用navigateTo，可以传参// 在另一个页面中，使用 onLoad 生命周期来接收参数skipToNotTabPage() {wx.navigateTo({url: '/pages/user/user?id=123&name=abc'})}
})

微信小程序知识点总结（二）相关推荐

微信小程序知识点总汇
微信小程序知识点总汇文件结构:最上层app ->多个page ->多个组件(内置组件/自定义组件) app: app.js:创建app实例代码 [app:实例对象 app.json:程序 ...
黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现附源码
黯然微信小程序杂记(二):小程序最新版登录进行缓存模块的实现附源码一.功能描述二.mine.wxml界面图片三.mine.wxml代码四.mine.wxss代码五.mine.js代码六. ...
微信小程序把玩（二十八）image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
微信小程序把玩（二十七）audio组件
微信小程序把玩(二十七)audio组件原文:微信小程序把玩(二十七)audio组件音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml < ...
微信小程序把玩（二十六）navigator组件
微信小程序把玩(二十六)navigator组件原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
微信小程序条码、二维码生成模块
代码地址如下: http://www.demodashi.com/demo/13994.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
基于JavaSSM和微信小程序的智能二维码门禁管理系统
目录 1 引言 2 2 系统需求分析 2 2.1开发环境 2 2.2关键技术 2 2.2.1 Spring 框架 2 2.2.2 Spring MVC 框架 3 2.2.3 Mybatis 3 2.2 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...

微信小程序知识点总结（二）

一、swiper插件的使用

1、页面逻辑（xxxx.js）：

2、页面结构（xxxx.wxml）

3、详细的参见官方文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

二、App、Page、Component等类的生命周期

1、app：

2、page

3、component

三、自定义cate组件

cate.wxml

cate.wxss

cate.js

cate.json

使用自定义封装的cate插件

四、列表渲染

五、条件渲染

六、动态样式

七、事件绑定

xxxx.wxml

xxxx.js

八、表单双向绑定

九、小程序路由跳转

微信小程序知识点总结（二）相关推荐

最新文章

热门文章