一. 小程序
1-1. 什么是小程序?
是一种不需要下载安装即可使用的应用。
- 无需安装下载
- 即用即开
- 开发门槛低
1-2. 与网页程序开发的区别?
小程序:
- 依赖于微信或其他App
- 所用的组件, UI都是确定好的, 不用考虑兼容问题
- 基于App实现, 速度跟流畅
普通网页:
- 应用在移动端和pc端
- 开发时, 有开发工具,框架, UI库可选, 还要注意兼容问题
- 网页在不同浏览器或设备解析加载会比较慢一点
- 需要通过王子来访问
1-3. 传统App开发的区别?
小程序:
- 依赖于微信或其他App
- 无需安装, 开发技术要求较低, 不用考虑兼容问题
传统App:
- 独立运行, 无需依赖其他
- 需用用户安装, 开发时要解决设备兼容适配问题
1-4. 小程序框架结构:
分为 视图层 和 逻辑层
二. 小程序配置
2-1. tabbar配置
在app.json文件中
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./image/31shouye.png",
"selectedIconPath": "./image1/31shouye.png"
},
{
"pagePath": "pages/kind/kind",
"text": "菜单",
"iconPath": "./image/caidan.png",
"selectedIconPath": "./image1/caidan.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "./image/rizhi.png",
"selectedIconPath": "./image1/rizhi.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "./image/wode.png",
"selectedIconPath": "./image1/wode.png"
},
{
"pagePath": "pages/car/car",
"text": "购物车",
"iconPath": "./image/wode.png",
"selectedIconPath": "./image1/wode.png"
}
]
},
2-2. 小程序生命周期
// 整个小程序得生命周期函数
onLaunch() {
console.log('监听小程序初始化')
},
onShow(){
console.log('监听小程序启动或切前台。')
},
onHide(){
console.log('监听小程序切后台。')
},
globalData: {
nameArr: ['张文静','岳小慧','宋江燕']
},
shoplist:[
{
"id": 4,
"img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/176546/26/4766/230854/607aa012E97def171/7417547d2d2e5da3.jpg.webp",
"text": "兰叶源 创意中式陶瓷仕女香插香座插香器线香室内檀香家用线香薰炉摆件 小宫娥 坐 哑光",
"price": 166
},
{
"id": 5,
"img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/119997/6/15535/123334/5f8d237bE36364127/a4d5ee3e0209d2a0.jpg.webp",
"text": "<i class=\"more2_info_chosen\"></i>得力（deli）4905 电脑椅 家用办公椅 转椅人体工学网布椅子 时尚升降座椅",
"price": 459
},
]
2-3. 全局数据 globalData
- 在app.js中定义globalData属性( 该属性的数据, 每个页面都可以获取和修改
- 页面使用时, 创建一个App实例
const app = getApp()
onLoad(options) {
this.setData({
list: app.globalData.nameArr
})
this.setData({
// 拿到全局购物车数据
shoplist: app.shoplist
})
console.log(this.data.shoplist);
},
三. wxml语法:
- wx:for: 表示循环, 默认当前项为 item,下标为 index
- wx:key: 循环体的唯一标识
- wx:for-index: 用于自定义索引名, 默认为 index
- wx:for-item: 用于自定义循环当前项, 默认为 item
- wx:if wx:elif wx:else: 判断
3-1. 模版页面引用:
- 在 template标签中定义模版, name属性作为模版的名字
- 使用时: 在想要使用的 template模版中用 is属性声明需要使用的模版, 将模版需要的数据用** data传过去**
- 引用模版: 通过import引入
- 引用模版外的内容, 通过 include引入
// 定义模版
<template name="row">
<view class="row">
<image src="{{item.img}}" />
<rich-text nodes="{{item.text}}" class="text"></rich-text>
</view>
</template>
123434567890 // 模版外内容
// 使用模版
<import src="./mytem"/>
<view>
{{list}}
</view>
<view wx:for="{{shoplist}}" wx:key="id" c- 可以根据屏幕宽度进行自适应，响应式尺寸单位lass="row">
<template is="row" data="{{item}}"/>
</view>
<include src="./mytem"></include>
<view class="box">
</view>
四. 尺寸单位rpx
- 可以根据屏幕宽度进行自适应，响应式尺寸单位
- 仅支持部分CSS选择器，目前支持的选择器有：
- 单位 rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。在 iPhone6 上，屏幕宽度为375px，1rpx = 0.5px = 1像素，开发建议用 iPhone6 作为视觉稿的标准。
五. 页面生命周期
- data属性: 页面的初始数据
- onLoad(object[json] query) : 页面加载时触发, 一个页面只会调用一次, 可以在这里获取到其他页面传递的参数
- onShow(): 页面显示/切入前台时触发, 一个页面哦可以触发N次
- onReady(): 页面初次渲染完成时触发, 一个页面只会调用一次
- onHode(): 页面隐藏/切入后台时触发, 一个页面可以触发N次
- onPullDownRefresh(): 监听用户下拉动作, 需要在app.json文件中window节点中开启下拉刷新
- onReachBottom(): 上拉加载更多, 页面上拉触底事件的处理函数, 需要当前页面内容超过一屏显示
- onPageScroll(): 滚动事件监听, 页面滚动触发事件的处理函数, 需要当前页面内容超过一屏显示
- onShareAppMessage(): 自定义分享, 用户点击右上角转发, 可以自定义转发的内容
六. 自定义事件
6-1. 事件绑定
注意: 方法名不能加括号, 不能传参
- 绑定事件冒泡, 不会阻止事件冒泡
语法: bind事件类型=”方法名” / bind:事件类型
- 绑定非事件冒泡, 会阻止事件冒泡
语法: catch事件类型=”方法名” / catch:事件类型
- 点击事件onclick, 其实就是手指触摸事件, 官网规定是 tap, 处理程序: tapHandler
tapHandler() {
console.log('的确是点了，惊喜是：这节结束就下课。');
},
6-2. 事件对象
事件对象给事件对象传递参数
在标签上使用 data-数据名=”数据值” 传递
// 传递参数
<!-- 传递参数100 -->
<view bindtap="tapHandler" id="efg" data-m="100">
<!-- 传递参数abc -->
<view id="abc" data-abc="abc">点我触发事件</view>
</view>
// 接收参数
/**
* 事件对象获取
* 所有的事件处理程序都有一个默认的参数，这个参数就是事件对象eventObj
**/
tapHandler(eventObj) {
console.log(eventObj);
// 接收事件组件/标签自己的数据
console.log(eventObj.currentTarget.dataset.m);
// 获取事件组件/标签子的数据
console.log(eventObj.target.dataset.abc);
}
七. 小程序组件
7-1. 属性值类型
7-2. 共同属性
7-3. 视图容器组件
- swiper: 使用swiper展示轮播图
- scroll-view: 实现滚动切换的效果
7-4. 表单组件
按钮
<!-- 常规按钮：底色灰白的，不易见，type值为default（可以不写） -->
<button>常规按钮</button>
<!-- 主要按钮：绿色按钮，最常用的按钮 -->
<button type="primary">主要按钮</button>
<!-- 警告按钮：底色灰色，但是字是红色 -->
<button type="warn">警告按钮</button>
<!-- 按钮开放功能：打开授权，需要配合授权的回调函数，综合案例中再讲 -->
<button open-type="getUserInfo" bindgetuserinfo="getInfo">授权</button>
按钮button组件有一个非常实用的属性
open-type, 后续可以通过该属性赋予按钮高级的功能（微信开放能力, 例如:
- 获取用户信息的时候
- 唤起其他App的时候
- 不是任意app都可以唤起，只能唤起来源app
- 获取用户手机号
单选
<!-- 单选按钮组 -->
<!-- 由于单选按钮组中包含了多个redio，因此需要被包裹 -->
<radio-group>
<radio value="1">男</radio>
<radio value="2">女</radio>
</radio-group>
复选
<!-- 复选框组 -->
<!-- 与单选按钮组类似，也需要被包裹 -->
<checkbox-group>
<checkbox value="吃饭">吃饭</checkbox>
<checkbox value="睡觉">睡觉</checkbox>
<checkbox value="打DD">打DD</checkbox>
</checkbox-group>
输入框
<!--表单组件的标签的样式是需要自己去调节设置的 -->
<input type="text" value="zhangsan" />
7-5. 谋体组件
- camera
// 页面部分
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;" bindscancode='getscandata'></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
// 逻辑部分
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res1) => {
console.log(res1);
this.setData({
src: res1.tempImagePath
})
// 将照片保存到手机相册中
wx.saveImageToPhotosAlbum({
filePath:res1.tempImagePath,
success(res) {
console.log(res);
}
})
}
})
}
- video
// 页面部分
<view class="page-body">
<view class="page-section tc">
<video
id="myVideo"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
binderror="videoErrorCallback"
danmu-list="{{danmuList}}"
enable-danmu
danmu-btn
show-center-play-btn='{{false}}'
show-play-btn="{{true}}"
controls
picture-in-picture-mode="{{['push', 'pop']}}"
bindenterpictureinpicture='bindVideoEnterPictureInPicture'
bindleavepictureinpicture='bindVideoLeavePictureInPicture'
></video>
<view style="margin: 30rpx auto" class="weui-label">弹幕内容</view>
<input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
<button style="margin: 30rpx auto" bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
<navigator style="margin: 30rpx auto" url="picture-in-picture" hover-class="other-navigator-hover">
<button type="primary" class="page-body-button" bindtap="bindPlayVideo">小窗模式</button>
</navigator>
</view>
</view>
// 逻辑部分
function getRandomColor() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length === 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onShareAppMessage() {
return {
title: 'video',
path: 'page/component/pages/video/video'
}
},
onReady() {
this.videoContext = wx.createVideoContext('myVideo')
},
onHide() {
},
inputValue: '',
data: {
src: '',
danmuList:
[{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
}, {
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}],
},
bindInputBlur(e) {
this.inputValue = e.detail.value
},
bindButtonTap() {
const that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front', 'back'],
success(res) {
that.setData({
src: res.tempFilePath
})
}
})
},
bindVideoEnterPictureInPicture() {
console.log('进入小窗模式')
},
bindVideoLeavePictureInPicture() {
console.log('退出小窗模式')
},
bindPlayVideo() {
console.log('1')
this.videoContext.play()
},
bindSendDanmu() {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
},
videoErrorCallback(e) {
console.log('视频错误信息:')
console.log(e.detail.errMsg)
}
})
7.6 地理地位组件
- map
<!-- 地图组件 -->
<map longitude="{{long}}" latitude="{{lat}}" scale='20'></map>
onLoad: function (options) {
// 在该位置获取当前位置的经纬度
wx.getLocation({
type: 'wgs84',
success: (res)=> {
console.log(res);
this.setData({
long: res.longitude,
lat:res.latitude
})
}
})
},
app.json中
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredPrivateInfos": ["getLocation"],
八. 自定义组件
可以在不同的页面重复使用
8-1. 组件传参
- 1.创建组件: 创建文件夹component –> 生成相应的4个文件同页面一样
- 2.在组件js文件中,定义组件属性, 在页面中输出此属性
- 3.其他页面使用组件, 谁使用谁就在自己的json文件中注册组件
- 4.将组件名放在wxml中
- 父传子
- 子传父
- 子发送, 绑定一个事件
- 父组件接收
九. 组件生命周期
组件生命周期指的是: 组件自身的一些函数
- created(): 组件实例创建好时触发
- attached(): 组件完全初始化完毕, 进图页面节点树后
- detached():
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})
十. 导航方式
10-1. 基于组件 naviagte标签
- url属性: 去的地址, 要带’/’
- open-type: 跳转方式
<navigator url="/pages/index/index">去首页</navigator>
<!-- 声明式导航也支持传递参数 -->
<navigator url="/pages/index/index?id=1&age=22">带参数去首页</navigator>
<!-- 菜单的切换 -->
<!-- 无效方式 -->
<navigator url="/pages/scrollView/scrollView">尝试切菜单</navigator>
<!-- 可用 -->
<navigator url="/pages/logs/logs" open-type="switchTab">尝试切菜单</navigator>
10-2 基于 Api
<!-- 基于Api形式的导航实现 -->
<view bindtap="tapHandler1">去tab中的index</view>
<view bindtap="tapHandler2">去nav1</view>
<view bindtap="tapHandler3">去nav1</view>
// 编程式导航方式
// wx.switchTab 等于 navigator + open-type=switchTab
tapHandler1: function(){
wx.switchTab({url: "/pages/index/index"});
},
// wx.navigateTo 等于 navigator
// navigateTo，保留当前页面（目标页面左上角出现“返回”按钮），去应用内其它页面，但不能是tabbar中页面
tapHandler2: function(){
wx.navigateTo({url: "/pages/nav1/nav1"});
},
// wx.redirectTo 等于 navigator + open-type=redirect
// redirectTo，不保留当前页面（目标页面左上角出现“首页”按钮），去应用内其它页面，但不能是tabbar中页面
tapHandler3: function(){
wx.redirectTo({url: "/pages/nav1/nav1"});
},
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
