一,组件及基础属性介绍
1.属性介绍
属性 含义
text 文本
view 区域
button 按钮
input 表单
image 图片
include 包含
import 导入
web-view 导入html页面
2,容器组件
属性 含义
view 视图区域
swiper,swiper-item 、 幻灯片、轮播图
scroll-view 滚动视图
3.基础容器
1.text
介绍:user-select 可选文字
2.rich-text 富文本
3.icon 图标
4.表单
1.button
介绍: type,size,自定义
2.input输入
3.textarea文本区域
4.switch
介绍:type —
checkbox,
checkbox
5.navigator 导航
1.open-type
介绍:
redirect,
switch-tap,
navigate,
relunch
2.url
6.媒体
1.image
介绍:
src
mode模式
lazy-load懒加载
2.video 视频
7.其他
1.map 地图
2.web-view web视图
二,模板语法介绍
1.文本渲染
{{}}
2.条件渲染
wx:if=“{{}}”
wx:elif=“{{}}”
wx:else
3.列表渲染
wx:for=“{{list}}” ,{{item}} , {{index}}
wx:key=“title”
4.自定义列表
wx:for=“{{list}}”
wx:for-item=“myitem”
wx:for-index=“ind”
{{myitem}}
{{ind}}
5.import
1.定义模板 test.wxml
<temp name="user">
<view>用户名:{{name}}</view>
<import src="xxx/test.wxml">
<template is="use" data={{...userInfo}}>
6.include
拷贝src中非template的内容
三,事件
属性 含义
bindtap 触摸/点击
bindchange 值发生变化
bindconfrim 确认
bindinput 输入变化
四,表单的双向
<input value="{{temp}}" bindinput="inputHd">
this.setData({temp:e.detail.value})
获取事件对应表单的值
e.detail.value
五,事件的传参数
<button bindtap="showMsg" data-msg=“你好,靓”>
showMsg(e){
e.target.dataset.msg
}
六,响应式更新
this.setData({temp:‘’})
数据与视图都会更新
七,wx 的api
1.微信内置的方法
wx.showToast({title:"",icon:})
//弹出土司提升
wx.showLoading()
wx.request()
//网络请求工具
wx.stopPullDownRefresh()
//停止下拉刷新
wx.setStorageSync(key,value)
wx.getStorageSync(key)
//本次存、取
八,配置
1.全局配置 (app.json)
2.页面配置 (xxx.json)
"backgroundTextStyle": "light",
背景文字颜色 light | dark
"navigationBarBackgroundColor": "#f70",
背景颜色
"navigationBarTitleText": "小程序基础语法",
导航栏表情
"navigationBarTextStyle": "white"
导航栏+状态栏文字颜色 white | black
"enablePullDownRefresh": true,
允许页面下拉刷新
"usingComponents": {}
使用组件
九,页面生命
属性 含义
onLoad 页面加载
onPullDownRefresh 下拉刷新
onReachBottom 触底
十,页面跳转
1.组件 (navigator)
1.path 跳转的页面
2.open-type
属性 含义
navigate 跳转
redirect 重定向(不理历史记录)
switchTab 切换底部栏
navigateBack
3.js进行跳转
属性 含义
wx.navigateTo 跳转
wx.switchTab 底部栏切换
wx.redirectTo 重定向
wx.navigateBack() 返回
十一,小程序页面栈
1.小程序默认会缓存5个页面栈
2.A=>B=>C=>D=>E (这个5个页面都会缓存)
3.页面跳转
属性 含义
navigate 添加一个缓存页面栈
navigateBack 移除一个页面栈
redirect 替换一个一个页面栈
十二,页面传参
1.传递参数
<navigator url="xxxx?docid=yyyy&title=zzz"
1
2.获取参数:
onLoad(options){
//options.docid,options.title
}
十三,npm使用 weapp为例
- 在项目的根目录 npm init -y 初始化项目
- npm i @vant/weapp -S --production 安装
3.构建npm编辑器-》工具-》构建npm
4.修改app.js
“style”: “v2” 去除
注册组件
"usingComponents": {
"van-button": "@vant/weapp/button/index"
},
5.修改project.config.json setting
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],
6.在组件中使用
<van-button type="info">主要按钮</van-button>
十四,小程序的生命周期
1.onLaunch 启动
2.onShow 前台显示
3.onHide 后台运行
十五,页面的生命周期
1.介绍:
属性 含义
onLoad 加载,可以获取页面传递的参数
onShow 前台显示,开始播放视频
onReady 初次渲染完毕,操作组件或者dom
onHide 隐藏,停止播放
onUnload 卸载
十六,全局数据
1.app.js
定义全局数据
globalData: {
num:5
}
2.页面
1.获取app
const app = getApp();
2.介绍
属性 含义
onShow 中用全局数据更新本地数据
this.setData({count:app.globalData.num})
3.代码
// 更新时候要更新本地和全局
addCount(){
// 更新本地count
this.setData({
count:this.data.count+1
})
// 更新全局的num
app.globalData.num +=1
},
十七,自定义组件
1.步骤
01 创建一个组件
02 在页面中注册组件
"usingComponents": {
"item":"/components/item/item"
}
标题03 在页面中使用组件
2.组件的构造函数 (Component)
属性 含义
externalClasses 外部类
properties: 父组件传入的属性(参数)
data 组件内部的数据
methods 组件的方法
3.组件的传参 (父传子)
1.父页面
<item title="收藏夹">
2.子组件接收
properies:{
title:{type:String,value:''}
}
子组件页面wxml使用
{{title}}
子组件js的methods中使用
this.data.title
标题3.子传父
子组件js
this.triggerEvent("toggle",{value:true})
父组件。wxml
<item bind:toggle="toogleHd">
父组件.js
toggleHd(e){
//获取
e.detial.value
}
4.外部类
子组件.js
externalClasses:[item-class]
子组件.wxml
<view class="item item-class">
父组件wxml传入
<item item-class="myItem">
父组件.wxss
.myItem{ height:100rpx !important!;color:red;}
1.登录
1.getUserProfile只能获取到用户的头像和昵称,不能作为唯一标识符合与后端进行交互
01
wx.login() 获取code
把code发送给自己服务器(也可以加userInfo)
02
自己的服务器向微信服务器发送code+appid+AppSecret
换取唯一标识符 openid
03
通过openid可以实现登录,注册,权限等功能
2.监听滚动 (onPageScroll)
3.回到顶部/固定位置
wx.pageScrollTo({
duration: 500, //时间
scrollTop:0, //位置
})
wx.pageScrollTo({
duration: 500,
selector:".share"
})
4.获取设置/窗口信息 (wx.getSystemInfoSync())
5.获取电量 (wx.getBatteryInfoSync())
6.获取网络状态( wx.getNetworkType())
7.打电话/发短信
wx.makePhoneCall({
phoneNumber: '13598859747',
})
8.下载网络图片(权限)
wx.downloadFile()
wx.saveImageToPhotosAlbum()
//保存到相册
9.上传图片
wx.chooseMedia({
count:1})
wx.uploadFile({
filePath: res.tempFiles[0].tempFilePath
})
10.设置标题
wx.setNavigationBarTitle({
title: '自定义组件',
})