一:基础
1:设计稿是750,小程序的宽度是750rpx
2:网页使用
,小程序中使用
<view class="prefile"></view>
3:小程序轮播
// autoplay:为自动播放;
// circular:为循环播放
// indicator-dots出现轮播原点效果
indicator-color="#fff"圆点默认颜色
indicator-active-color="#fff"圆点选中颜色
<swiper autoplay indicator-dots circular>
<swiper-item> //放入轮播内容 </swiper-item>
</swiper>
4:小程序 index.js 页面中必须调用 Page 函数,且要有一个参数为对象类型
Page({
data:{
处理数据
message:'hello word'
},
// 小程序中不需要写 method方法
sayHi() {
// console.log('你好~');
// 如果想改数据 正确的写法 必须加this.setData({})
this.setData({
message:'sayhi'
})
// 正确的读取数据 (this.data必须加data)
this.data.message;
}
})
// 用 bind:事件名称/类型="事件回调"
// 在小程序中没有 (click点击) 而是 tap为点击事件
<view bind:tap="sayHi" class="msg">{{message}}</view>
5:在 input 输入框中
// value是用来显示数字
<input value="{{number}}" type="text" />
6:小程序跳转链接为
<navigator url="./demo">跳转到指定页面</navigator>
7:全局 app.json 文件基础配置 (配置项)
// 文件路由
"pages": ["pages/index/index"]
"window": {
// 全局头部标题
"navigationBarTitleText": "学习小程序",
// 头部背景颜色
"navigationBarBackgroundColor": "#f00",
// 头部文字颜色(只能设置white,black两种颜色)
"navigationBarTextStyle": "white"
//下拉功能
"enablePullDownRefresh": true
}
// 首页底部导航切换效果
"tabBar": {
"list": [
{
"text": "首页",
// 地址
"pagePath": "pages/index/index",
// 图标
"iconPath": "static/tabbar/home-default.png",
// 选中后的图标
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"text": "日志",
"pagePath": "pages/logs/logs",
"iconPath": "static/tabbar/category-default.png",
"selectedIconPath": "static/tabbar/category-active.png"
}
]
// 文字默认颜色
"color":"#333",
// 选中后的文字颜色
"selectedColor": "#e93b3d",
// 底部背景颜色
"backgroundColor": "#ffffff",
// 边框颜色
"borderStyle": "white",
// tab栏的位置
"position": "bottom",
}
8:图片设置,必须使用网络图片地址或者base64格式的
.box {
width: 300rpx;
height: 200rpx;
background-color: pink;
/* background-image: url(/assets/images/avatar_1.jpg); */
background-image: url(https://tenfei02.cfp.cn/creative/vcg/800/new/VCG41N1210205351.jpg);
background-size: contain;
}
/* 字体文件也是要写在 wxss 里,因此不能用本地路径必须放到服务器上 */
二:小程序模板语法:
**1.1 双向绑定 **
// model:value="{{绑定的值}}"
<view class="msg">{{msg}}</view>
// 双向绑定
<input type="text" model:value="{{msg}}" />
Page({
data: {
msg: '这是一个小程序'
}
})
1.2 使用 wx:for 对数组进行遍历:
/*
注:循环比较复杂时 如果要把默认的 item 替换掉的话 要加入 "wx:for-item="students"
索引:"wx:for-index="key"
*/
例:<view class="item" wx:for="{{students}}">
/* 如果只循环一层 序号默认为{{index}} 内容用{{item.定义的名称}}*/
<text>{{index+1}}</text>
<text>{{item.name}}</text>
<text>{{item.age}}</text>
<text>{{item.gender}}</text>
</view>
Page({
data: {
students: [
{id: 1,name: '小明',age: 19,gender: '男'},
{id: 1,name: '小红',age: 18,gender: '女'},
{id: 1,name: '小刚',age: 20,gender: '男'},
{id: 1,name: '小白',age: 18,gender: '女'}
]
}
})
单独数组的形式:wx:key="this" 使用this代替
<text wx:for="{{names}}" wx:key="*this">{{item}}</text>
Page({
data:{
names: ['小红', '小明', '小凡']
}
})
1.3:wx:if 和 wx:else 的用法
// 条件处理:wx:if=“{{条件}}”
// 配合 else 使用
<button bind:tap="toggle" type="primary">显示/隐藏</button>
//通过移除节点来实现显示和隐藏的
<view wx:if="{{seen}}">{{msg}}</view>
1.4 hidden 的使用
<button bind:tap="toggle" type="primary">显示/隐藏</button>
// 和wx:if效果一样:不过是通过 display:none 来控制显示隐藏的
<view hidden="{{seen}}">{{msg}}</view>
1.5 block 用法
<block wx:if="{{false}}">
// ...被隐藏的内容
</block>
// 显示wx:else的内容
<view wx:else>空空如也~</view>
三:生命周期
小程序的生命周期:(三类)应用级别、页面级别、组件级别
2.1 应用级别
onLaunch() 、onShow()、onHide()
// App 是全局函数,首字母大写,传入对象类型参数
// 应用级别 要写到app.js中 必须要调App({})函数
App({
onLaunch() {
// 只会执行 1 次,除非重新执行
console.log("小程序启动了...");
},
onShow() {
// 反复执行
console.log("前台运行中...");
},
onHide() {
// 反复执行
console.log("后台运行中...");
}
})
2.1.1 场景值
描述用户如何打开小程序的
场景值 | 说明 |
---|---|
1001 | 发现栏小程序主入口 |
1011 | 扫描二维码 |
1007 | 单人聊天会话中的小程序消息卡片 |
// 只能在onLunch()和onShow中使用
onLaunch(params) {
// 只会执行 1 次,除非重新执行
console.log("小程序启动了...");
console.log(params); // 控制台输出
},
地址带参数传到另一个页面
// index页面:
<navigator url="/pages/logs/logs?name=小明&age=19">去日志页面</navigator>
// logo.js页面
Page({
// 必须用 onLoad()获取传过来的参数
onLoad(query) {
// 渲染地址中的参数
this.setData(query)
}
})
// 渲染到页面
<view>姓名:{{name}},年龄:{{age}}</view>
3.1 网络请求
wx.request({
url:'qpi/path/xxxx',
method:'GET|POST|PUT',
data:{},
//success(res){
//成功响应的回应
//},
// 要想使用 this 必须使用箭头函数
this.setData({
students: res.data.result
})
})
3.1.1 wx.showLoading 加载
wx.showLoading({
title: '正在加载.....',
// 在加载的过程中 避免在加载的过程中用户点击页面
mask: true
})
// 调用 wx.request 发起请求
wx.request({
url: 'https://mock.boxuegu.com/mock/3293/students',
method: 'GET',
success: (res) => {
// 要想使用 this 必须使用箭头函数
this.setData({
students: res.data.result
})
},
// 不管成功与否都要执行 complete ,所以在里面写 wx.hideLoading() 加载结束
complete() {
wx.hideLoading()
}
})
3.1.2 wx.showToast 提示的使用
<input type="text" model:value="{{username}}" />
<button bind:tap="submitForm" type="primary">提交</button>
submitForm() {
// 汉子正则
const reg = /^[\u4e00-\u9fa5]{2,5}$/;
// .test 验证 姓名
const valid = reg.test(this.data.username)
// wx.showToast
if (!valid) wx.showToast({title: '只能输入中文姓名',icon:'error',mask: true})
},
3.2 本地存储
// wx.setStorageSync 在本地存入一个数据
// wx.getStorageSync 读取本地的一个数据
// wx.removeStorageSync 删除本地存储的一个数据
// wx.clearStorageSync 清空本地存储的数据
<button type="primary" bind:tap="setStorage">添加本地数据</button>
<button type="primary" bind:tap="getStorage">读取本地数据</button>
<button type="primary" bind:tap="removeStorage">删除本地数据</button>
<button type="primary" bind:tap="clearStorage">清空本地数据</button>
存入数据:
setStorage() {
// 小程序有 api
// wx.setStorage(数据名,数据本身)
wx.setStorageSync('user', {name: '小红',age: 18})
},
读取本地数据
getStorage() {
// wx.getStorageSync('数据名')
// 如果存入的是 json 字符串,不需要 JSON.parse() 处理
const user = wx.getStorageSync('user')
console.log(user);
},
四:使用npm/yarn包
// yarn add miniprogram-computed 命令
// 安装成功后 必须要点 工具栏里面的 构建npm选项
// 引入:
const computedBehavior = require('miniprogram-computed').behavior;
//使用:
Page({
// 将其应用到页面中
behaviors: [computedBehavior],
})
// 重构目录
// 把assets、pages、utils,全局app.js、app.json、app.wxss 统一放到一个新建的文件夹中 (如:miniprogram文件中)
//在 project.config.json 中加入
"miniprogramRoot": "miniprogram/", //自定义小程序目录
// 在 "setting" 里加入:
"setting":
{
// 将false改为true
"packNpmManually": true,
}
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram"
}
],
注: 配置完要点击工具->构建npm
4.1.1 vant 组件库的使用
// 去官网
五:注册组件
-
添加一个文件(名字随意)如:conponents,
-
例:在components 中创建一个 auth 的组件,
-
使用组件:在page中 例如index要使用,在 index.json中加入 auth组件的路径
"usingComponents": { // 要注意路径是从components开始的 "auth": "/components/auth/index" }
-
组件里要定义一些方法的时候要通过 methods
/*** 组件的方法列表 */ methods: { sayHi() { console.log("你好,我是一个组件"); // 读取数据 console.log(this.data.name + "你好"); // 更新数据 this.setData({ name: '小小明'}) } }
<view>{{name}}</view> <button bind:tap="sayHi" type="primary">打招呼</button>
5.1 组件的生命周期
// 语法:
lifetimes: {
created() {
console.log("组件实例被创建了...");
// properties 中的数据 也是用 this.data 获取
console.log(this.data.isLogin);
},
// 相当于vue中的monthed
attached() {
console.log("组件渲染到页面中了...");
}
},
5.1.1 生命周期(逻辑)
使用生命周期去检测登录的状态 例:
<auth is-login="{{false}}" tips="{{[1,2,3]}}"></auth>
lifetimes: {
attached() {
// 验证登录结果
const isLogin = this.checkLogin()
// 更新数据
this.setData({ isLogin })
},
}
// 在组件一加载的时候判断用户是否登录
methods: {
// 检测登录 (找本地存的 token)
checkLogin() {
// !! 相当于是否
return !!wx.getStorageSync('token')
}
}
5.2 组件模板
5.2.1 插槽
在代码中使用
<auth is-login="{{false}}" tips="用户未登录!">
<view>这里的内容会填充到 slot 插槽的位置</view>
<view>这里的内容会填充到 slot 插槽的位置</view>
</auth>
在组件中定义:
<view class="container">
// 在组件中定义插槽
<slot wx:if="{{isLogin}}"></slot>
<text wx:else>{{tips}}</text>
</view>
注:在小程序中默认值支持一个插槽
// 小程序中如果要定义多个插槽 需要开启
options: {
// 启用多插槽
multipleSlots: true
}
使用 vant
// 安装 vant
npm i @vant/weapp -S --production --registry=https://registry.npmmirror.com
// 如果安装不上先 npm init -y 一下
5.3 样式设置:
/* 全局设置 */
page {
--my-color: pink;
--my-text-color: green;
--cell-large-title-font-size: 30rpx;
}
.box {
/* 作用域仅限 box 本身及其后代代码 */
/* --my-color: pink;
--my-text-color: green; */
/* background-color: var(变量名); */
width: 400rpx;
height: 200rpx;
/* 使用全局样式 */
background-color: var(--my-color);
}
5.4 :小程序分包
// 在 app.json(全局配置) 中新加一个
"subPackages": [
{
// 分包的名字
"root": "goos_pkg",
// 分包的路径
"pages": ["pages/goods/list"]
}
],
注:tabBar只能放到主包中
// 也是在 app.json 中添加
// 打开首页面时 提前下载 goods这个包
"preloadRule": {
"pages/index/index": {
"packages": ["goods"]
}
},
六:框架接口
在 app.js 中必须调用 App({})
在页面当中 js 文件中必须调用 Page({}) 函数
在组建当中 js 文件中必须调用 Component({}) 函数
// 在 app.js中
App({a: 1, b: 2, c: 3})
// 获取应用实例
// 获取的是全局 app.js 中 App 中定义的数据,实现整个小程序数据的共享
const app = getApp()
console.log(app);
6.1:getCurrentPages()
// getCurrentPages() 获取当前所有已打开的页面实例
// 实例中包含了 route 属性
onLoad(options) {
const pageStack = getCurrentPages()
console.log(pageStack);
},
// 取出最后一个页面的 route 路径
const currentPage = pageStack[pageStack.length - 1]
console.log(currentPage.route);
6.2 获取头像
<!-- 获取头像 -->
<view class="avatar">
<!-- 官方获取头像:open-type="chooseAvatar" -->
<button open-type="chooseAvatar" bind:chooseavatar="getUserAvatar">
<image src="{{profile.avatarUrl}}"></image>
</button>
</view>
Page({
data: {
profile: { avatarUrl: '/static/images/avatar.png' }
},
// 添加绑定事件
getUserAvatar(ev) {
this.setData({
// 点击切换头像的路径:ev.detail.avatarUrl
profile: { avatarUrl: ev.detail.avatarUrl }
})
}
})
6.3 获取昵称
<!-- 1、设置 input 的 type 属性值为 nickname
2、监听 input 组件 input、blur、change 等事件获取表单中的值
-->
<view class="nickname">
<label for="">昵称</label>
<input bind:blur="getUserNickName" type="nickname" value="{{profile.nickName}}" />
</view>
getUserNickName(ev) {
console.log(ev);
this.setData({
// 两种写法一样
//profile: {
// 点击获取昵称的路径:ev.detail.value
// nickName: ev.detail.value,
//}
'profile.nickName': ev.detail.value,
})
}
七:路由
小程序的路由就是简单的路由跳转
7.1 :普通跳转形式
<!-- 用普通形式跳转,在返回的时候会一层一层的返回 -->
<navigator url="/pages/logs/logs" open-type="navigate">普通的跳转(去日志页面)</navigator>
7.2 :重定向跳转形式
<!-- 用重定向形式跳转,在返回的时候会直接返回到首页 -->
<navigator url="/pages/router/index" open-type="redirect">去路由页面(重定向)</navigator>
7.3:跳转到导航页
<!-- 如果一个页面被设置成了 tabBar 页面,只能通过 open-type="switchTab" 才可以跳转过去 -->
<navigator open-type="switchTab" url="/pages/cart/index">去购物车</navigator>
7.4:跳转后不能返回
<!-- 跳转后不能返回 open-type="reLaunch" -->
<navigator url="/pages/logs/logs" open-type="reLaunch">去日志页面(reLaunch)</navigator>