目录
一、微信小程序开发
- https://mp.weixin.qq.com/ 注册账号
- https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载开发工具
- 创建项目
二、文件介绍
- 全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,直接在pages中创建新元素可自动生成文件
2.创建文件说明
. js文件、.json 配置文件、 .wxml页面文件、 .wxss文件样式
三、基础组件(基本基础组件,更多详细请查看微信开发文档)
- viwe 常用组件类似于 div
- text 用来输入文本
- button 按钮
- input 表单
- image 图片
- web-view 导入html页面 (<web-view src="地址"></web-view>)
- map 地图
- navigator 跳转
四、模板语法
一、文本渲染 {{表达式}}
二、条件渲染
wx:if="{{}}"
wx:elif="{{}}"
ex:else
三、列表渲染
wx:for="{{list}}" wx:key="title"
四、自定义列表
wx:for="{{list}}"
wx:for-item="myitem" {{myitem}}
wx:for-index="ind" {{ind}}
五、import
1.定义模板 test.wxml
<temp name="user">
<view>用户名:{{name}}</view>
2.使用
<import src="xxx/test.wxml">
<template is="use" data={{...userInfo}}>
六、include
拷贝src中非template的内容
五、事件
- bindtap 触摸/点击
- bindchange 值发生变化
- bindconfrim 确认
- bindinput 输入变化
六、表单的双向
- <input value="{{temp}}" bindinput="inputHd">
- this.setData({temp:e.detail.value})
- 获取事件对应表单的值 e.detail.value
七、事件的传参数
wxml:<button bindtap="showMsg" data-msg=“你好”>
ja:showMsg(e){
e.target.dataset.msg
}
八、响应式更新
this.setData({temp:''}) 数据与视图都会更新
九、wx 的api
-
微信内置的方法
-
wx.showToast({title:"",icon:}) 弹出土司提升
-
wx.showLoading()
-
wx.request() 网络请求工具
-
wx.stopPullDownRefresh()停止下拉刷新
-
wx.setStorageSync(key,value) ;wx.getStorageSync(key) 本次存、取
十、配置
一、 全局配置文件 app.json
二、 页面配置 xxx.json
- "backgroundTextStyle": "light",背景文字颜色 light | dark
- "navigationBarBackgroundColor": "#f70", 背景颜色
- "navigationBarTitleText": "小程序基础语法", 导航栏表情
- "navigationBarTextStyle": "white"
- 导航栏+状态栏文字颜色 white | black
- "enablePullDownRefresh": true,允许页面下拉刷新
- "usingComponents": {} 使用组件
十一、页面生命
- onLoad 页面加载
- onPullDownRefresh 下拉刷新
- onReachBottom 触底
十二、页面跳转
一、 页面组件跳转 navigator
1.path 跳转的页面
2.open-type
navigate 跳转
redirect 重定向(不理历史记录)
switchTab 切换底部栏
navigateBack
二、 js进行跳转
wx.navigateTo 跳转
wx.switchTab 底部栏切换
wx.redirectTo 重定向
wx.navigateBack() 返回
十三、小程序页面栈
- 小程序默认会缓存5个页面栈
- A=>B=>C=>D=>E 这个5个页面都会缓存
- navigate 添加一个缓存页面栈
- navigateBack 移除一个页面栈
- redirect 替换一个一个页面栈
十四、页面传参
1.传递参数
<navigator url="xxxx?docid=yyyy&title=zzz"
2. 获取参数:
onLoad(options){
//options.docid,options.title
}
十五、npm使用插件 weapp为例
1.在项目的根目录 npm init -y 初始化项目
2.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
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],
6.在组件中使用
<van-button type="info">主要按钮</van-button>
十六、小程序的生命周期
- onLaunch 启动
- onShow 前台显示
- onHide 后台运行
十七、页面的生命周期
- onLoad 加载 可以获取页面传递的参数
- onShow 前台显示 开始播放视频
- onReady 初次渲染完毕 操作组件或者dom
- onHide 隐藏 停止播放
- onUnload 卸载
十八、全局数据
1. app.js 定义全局数据
globalData: {
num:5
}
2.页面
- 获取app const app = getApp();
- onShow中用全局数据更新本地数据 this.setData({count:app.globalData.num})
- 更新时候要更新本地和全局
addCount(){
// 更新本地count
this.setData({
count:this.data.count+1
})
// 更新全局的num
app.globalData.num +=1
},
十九、自定义组件
一、定义步骤
1. 创建一个组件
2. 在页面中注册组件
"usingComponents": {
"item":"/components/item/item"
}
3.在页面中使用组件 <item></item>
二、组件的构造函数 Component
- externalClasses 外部类
- properties: 父组件传入的属性(参数)
- data 组件内部的数据
- methods 组件的方法
三、组件的传参 (父传子)
1. 父页面 <item title="收藏夹">
2. 子组件接收
properies:{
title:{type:String,value:''}
}
子组件页面wxml使用 {{title}}
子组件js的methods中使用 this.data.title
四、子传父
- 子组件js :this.triggerEvent("toggle",{value:true})
- 父组件 wxml :<item bind:toggle="toogleHd">
- 父组件.js:toggleHd(e){ //获取 e.detial.value}
五、外部类
- 子组件.js :externalClasses:[item-class]
- 子组件.wxml :<view class="item item-class">
- 父组件wxml传入 :<item item-class="myItem">
- 父组件.wxss :.myItem{ height:100rpx !important!;color:red;}
二十、分包
一、底部栏的导航就是主包
打开小程序 默认只下载主包
小程序的打开速度加快通过分包可以让项目更加庞大
二、分包
"subpackages": [
{
"root": "news",
"pages": [
"pages/detail/detail"
]
}
],
三、分包预加载
"preloadRule": {
"pages/jok/jok": {
"network": "all",
"packages": [
"news"
]
}
},
二十一、云开发
一、概念:
云数据库(moogoDB)
云函数(nodejs)
云存储
二、作用:
让前端脱离后端直接链接数据库和存储
写好nodejs ,根据一定的规则操作业务数据,链接数据库,再把nodejs上传到云端
在客户端调用nodejs对应的方法,获取服务器数据
三、云函数定义
1.config配置
2.package.json 包管理
3.js逻辑
1.导入wx 的sdk 初始化云
const cloud = require('wx-server-sdk')
cloud.init()
2. 导入数据库
const db = cloud.database();
3.导出
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
//当前微信的环境
// event 调用函数传入的参数
return {} 返回的数据
})
注:云函数写好要上传到服务器 !
四、调用云函数
wx.cloud.callFunction({name:"addMsg",data:{}})
.then()
.catch()
name云函数的名称,data 传入的参数
五、数据库操作
一、查
- db.collection(“guest”).get()
- skip() 跳过
- orderby("date","desc") 日期从大到小
- limit ()限制
- .count() 查询总数
二、增
db.collection("guest").add({data:{}}) // data是添加的数据
三、删除
db.collection("guest").doc(event.id).remove()
六、云文件的操作
1. db.collection("guest").doc(event.id).remove()
cloudPath 文件名(存储到服务器的)
path 本地缓存文件
success成功 res.fileID文件地址
2.wx.chooseMedia({})
count:9,最多选择数量
res.tempFiles[i].tempFilePath