mpvue？
{{}} 在vue和小程序中的区别？
01 小程序中{{}}和vue中的{{}}用法基本一致，可以显示data中的数据，可以写表达式
不一样的地方？
01 小程序的{{}}可以写在属性中
02 小程序的{{}}不能使用方法的调用
微信小程序中的 wx:key
01 wx:for 可以遍历数组中的数据
02 wx:for 一定要指定wx：key，不然会报一个警告
03 wx:key 的值有两种方式
如果遍历的值是一个对象，wx:key可以是对象中某一个唯一的属性 。
如果数组中的值是一个字符串，wx：可以指定为*this， *this表示字符串本身。
在微信小程序中注册事件分为两种
bind+事件： bind注册的事件会冒泡
catch+事件： catch注册的事件不会冒泡
在方法中如何放到data中的数据？
大坑：在微信小程序中的数据，数据不是双向绑定
data中的数据发生了改变，视图中的数据并没有跟着改变
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
方法一
data: {
msg:"hellow 小程序"
},
change(){
this.setData({
msg:'哈哈哈' //要修改的参数和值
})
}
通过 this.setData({ }) 方式进行修改，可以实现双向绑定
方法二
data: {
msg:"hellow 小程序"
},
change(){
// 修改msg的值
this.data.msg="你好啊"
// 需要进行一次同步
this.setData(this.data)
}
在小程序中将数据保存data有一个专用方法
this.setData({
属性名：新值
})
如何获取input文本框的值？
01通过e.detail.value
02如果注册事件的时候，想要传递参数，给当前元素添加自定义属，通过e.currentTaget.dataset来获取值。
js中的data中发生了改变，页面中的数据并不会改变，调用setData同步才行
input框中的值发生了改变，js中的数据并不会跟着变，自己注册事件，自己修改data中的数据。微信小程序中不支持双向绑定
微信支付
https://blog.brain1981.com/1946.html
小程序的生命周期，app.js页面（创建一个小程序的实例，只会调用一次）
//app.js 初始化小程序 ， 做一些通用的操作 App({ // 小程序初始化的时候执行的钩子函数，全局只会触发一次 // 小程序中一次性的操作，都可以放到onLaunch中 // 比如： 登录 获取你的用户信息 onLaunch(){ //做登录 获取用户信息等 console.log('onLaunch','小程序初始化好了') }, // 只要小程序显示出来了，就会执行 onShow(){ console.log('onShow','小程序显示了') }, // 小程序隐藏的时候触发 onHide(){ console.log('onHide','小程序隐藏的时候') }, // 小程序脚本发生错误就会触发 onError(){ // 可以把错误的信息收集起来，放到数据库 console.log('onError','报错了') }, // 小程序哟啊打开的页面不存在的时候触发 onPageNotFound(){ } })
Page页面（创建页面）
// pages/index/index.js // page方法用来创建一个小程序的页面 Page({ // 页面加载的时候会执行onLoad,一次 onLoad () { console.log('onLoad','页面加载了') }, // 页面显示 onShow () {//一般在这里发送ajax console.log('onShow','页面显示的时候就会执行') }, // 页面隐藏 onHide () { console.log('onHide', '页面隐藏的时候就会执行') }, // 表示页面已经渲染完了 onReady (){//可以发送ajax console.log('onReady', '页面渲染完了') wx.setNavigationBarTitle({ title: 'yyyy' }) }, // 页面卸载时候触发 onUnload () { } })
小程序发送ajax请求
// pages/sy/sy.js Page({ data: { imgList: [],//用于存储轮播图数据 }, onShow: function () { wx.request({ url: 'https://locally.uieee.com/slides', method:'GET', dataType:'json', success:(res)=>{ this.data.imgList=res.data //同步 this.setData(this.data) } }) } })
微信开发工具下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
创建项目
1 微信公众平台 ： https://mp.weixin.qq.com/
2 小程序秘钥 AppID ： 左侧导航栏----开发---开发设置
云开发
详情----调试基础库 2.2.5
注意事项：每一个小程序项目不能超过2M
微信小程序中常见的标签 wxml
wxss
（1）单位：rpx -----响应式像素。可以根据屏幕的宽度自适应调用图片文字容器大小
（2）引入外部的样式文件 @import './base.wxss'
关于RPX，移动端开发你使用的是什么像素？
示例： iphone6（2）
逻辑像素 * dpr = 物理像素
iphone6 375px * 2 = 750rpx
小程序，引入其它样式文件
将项目公共样式内容统一保存在一个文件中
style/common.wxss
@import '../../style/common/wxss'
小程序开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/
微信公众平台--小程序(重点)-第三方组件库(样式库)
云开发兼容性
小程序第三方组件库（样式库）
Vant Weapp
https://youzan.github.io/vant-weapp/#/intro
-WeUI
-iView Weapp
小程序 配置文件
project.config.json 项目配置文件
app.json 项目全局配置文件
exam01.json 组件配置文件
app.json 全局配置文件
如果一个选项添加 app.json 中 所有的组局都会生效
微信小程序中 js 与 网页 程序中 js有什么区别？
ECMA 基本类型： string ；number； boolean；undefined ； null；
ECMA 对象类型：Date ; Math ; RegExp ; Array ; Function ;...
DOM/BOM 不能使用，小程序中写 document.getElemnt会报错
微信小程序循环 wx:for
<view wx:for="{{数组名称}}" wx:key="index">
{{item}} 当前对象
{{index}} 当前元素下标
</view>
wx:for="{{循环数组名称}}"
wx:key="index" 数组元素下标(排序规则），快速排序
wx:if
<view wx:if="{{condition}}"></view>
condition:表达式 true false
true 当前元素正常显示
false 当前元素删除
if elif else
<view wx:if="{{condition}}">111</view> // if
<view wx:elif="{{condition}}">222</view> // else if
<view wx:else>333</view> // else
hidden
<view hidden="{{condition}}">内容</view>
condition:表达式 true false
true隐藏 false 显示
问题:什么时候使用if 什么时候使用hidden
(1)如果此元素需要频繁切换使用hidden
(2)如果此元素在运行中不大可能改变则 wx:if 较好
微信公众平台--小程序--js/事件-事件
pc端项目 屏幕宽度 > 970px 操作:鼠标键盘
移动端项目 屏幕宽度 < 970px 操作:手指
移动端项目：
touchstart 当手指触碰到屏幕时发生的事件，不管几根手指
touchmove 当手指在屏幕上滑动的时候触发
touchend 当手指离开屏幕时候触发
zepto.js 相当于移动端的jquery
tap 触碰一次
longtap 长按一次 超过350ms
swipe 滑动
swipeLeft 滑动
微信小程序事件分为两种
小程序事件分为两种
(1)冒泡事件:当一个组件上事件被触发后，该事件向父元素传递
(2)非冒泡事件:当一个组件上事件被触发后，不向父元素传递
小程序绑定事件方式
-支持事件冒泡
<view bind事件名="事件处理函数"></view>
-不支持事件冒泡
<view catch事件名="事件处理函数"></view>
例子
支持冒泡
<view bindtap='handle2'>父元素 <view bindtap='handle1'>子元素</view> </view>
不支持冒泡
<view catchtap='handle2'>父元素 <view catchtap='handle1'>子元素</view> </view>
小程序--生命周期(组件)
组件生命周期:一个组件从创建开始到使用最后销毁过程
/*
组件创建成功后触发一次
(1)发送ajax请求
(2)获取传递参数
*/
onLoad (options) { },
/*
组件渲染成功后触发一次
*/
onReady () { },
/*
显示组件
*/
onShow () { },
/*
隐藏组件
*/
onHide () { },
/*
销毁组件
*/
onUnload () { },
上拉加载 下拉刷新
/** * --监听用户下拉动作 （用户下拉操作，刷新操作） 下拉刷新 * 小程序默认禁止 用户下拉操作 * 修改默认行为，激活下拉。 * 01 全局修改 app.json 文件 window 下 修改 * "enablePullDownRefresh": true 允许下拉 * 02 当前组件修改 在当前组件的json文件中 修改 * "enablePullDownRefresh": true 允许下拉 */ onPullDownRefresh () { console.log('下拉刷新') }, /** * 页面上拉触底事件的处理函数 （上拉触底，翻页加载） 上拉加载 */ onReachBottom () { console.log('上拉加载') }
微信小程序组件跳转 wx.redirectTo({}) -----不能返回，因为跳转后把原先的组件销毁了
利用 wx.redirectTo({}) 实现跳转
比如 组件1 跳转到 组件 2。 会先卸载组件1 然后创建组件2
保留并且跳转
wx.navigateTo({
url:"/pages/comment/comment"
})
小程序--云开发
小程序与腾讯云合作新方案[云开发]云开发==[云数据库+云存储+云函数]
云数据库:数据增加/删除/修改/查询....
云存储:上传文件/下载文件/分享文件/管理文件....
云函数:获取appid/调用高级权限操作 （没有跨域）
小程序--开通云开发
小程序开发工具-->"云开发" 开通
环境名称:[web-test-01]英文 数字 -
环境id:[] 自动生成环境复制下来
小程序--云数据库(mongodb nosql数据库)
云开发提供一个JSON数据库提供2GB免费空间
|
关系型数据库 |
文档数据库 |
|
数据库 database |
数据库 database |
|
表 table |
集合 collection |
|
行 row |
记录 record/doc |
|
列 column |
字段 field |
#关系型数据库:适合复杂数据关系 企业内部软件系统
#文档型数据库:数据关系简单 频繁查询,更新 app
|
数据类型 |
|
|
String 字符串 |
Number数字 |
|
Object 对象 |
Array数组 |
|
Bool 布尔 |
GeoPoint 地理位置点 |
|
Date 时间(客户端) |
NULL |
小程序--云数据库操作
(1)控制台: 创建集合
(2)云函数:
(3)小程序操作:
通过小程序操作云数据库
（1）通过控制台 创建集合 比如 web2008
（2）初始化默认数据库
const db = wx.cloud.database();
（3）向集合中添加新记录
db.collection('集合名称').add(
{
data:{name:'zxh',age:'18'},
success:function( res ){ },
fail:function(err){ }
}
)
add() 向集合中添加数据
data:{} 数据
success 添加成功回调函数
fail 添加失败回调函数
常见错误:
(1) -502005 database collection not exists
#集合不存在 web1903
原因1:拼写错误db.collection("拼写错误")
原因2:没有集合
(2)如果创建二个环境
const db = wx.cloud.database({
env:"环境id"
});
env:环境
(3) errCode: -501005 invalid env
原因:env:"环境id错误"
小程序操作云数据库--更新
db.collection("集合名称").doc("当前记录id").update({
data:{
属性名：值
}
}).then( res=>{
console.log(res)
} ).catch(err=>{
console.log(err)
})
小程序操作云数据库--删除
db.collection("集合名称").doc("记录id") .remove().then(res=>{}).catch(err=>{})
#注意事项:通过小程序一次只能删除一条数据
小程序云开发-云数据库--查询
(1)查询所有数据
db.collection("集合名称").get().then(res=>{}).catch(err=>{})
get:获取查询
then:查询成功后获取返回内容
res 查询结果
catch:查询失败
err 失败原因
(2)查询指定数据
db.collection("集合名称").where({name:"jerry"}).get().then(res=>{}).catch(err=>{})
where查询条件
get 获取查询
then 查询成功后获取返回内容
res 查询结果
小程序云开发-云函数
云函数:特殊函数将其保存小程序云上(腾讯云)
云函数从功能很多优点:权限高 完成复杂操作
#注意事项:开发云函数要求本地下载安装nodejs v8.0 以上
小程序云开发-云函数-求和函数 sum
(1)开发工具 coludfunctions
鼠标右键->新建node.js云函数
(2)云函数名称 sumc
(3)打开index.js
(4)添加云函数代码
exports.main = async (event,context)=>{
return {
sumc:event.i + event.j
}
}
exports 导出 event 事件对象(获取用户参数)
main 主函数 context 上下文对象(获取用户信息)
async 导步(ES7语法)
(5)上传部署
右击创建并部署,云端安装依赖
(6)测试云函数
(7)在小程序中调用开发云函数
wx.cloud.callFunction({ //调用云函数
name:"云函数名", //云函数名
data:{i:1,j:2} //参数
}).then(res=>{ //调用成功
console.log(res);
}).catch(err=>{ //调用失败
console.log(err);
})
#注意事项:如果你旧版本小程序工具没有server-sdk报错
#右击 countFunctions 在终端中打开
#npm install --save wx-server-sdk@latest
常见错误
(1) Error: errCode: -404011 cloud function execution error
原因:
-调用云函数不存在
-调用去函数没有上传
-云函数名子拼写错误
小程序云开发-云函数-login 登录
小程序云开发-云函数-批量删除
云数据库web2019 同名记录 name:"zxy"
云函数目的:删除name:"zxy"
async:异步ES7 异步执行函数
await:等待如果执行耗时任务启动关键字等待任务
执行完毕
exports.main = async (event,context)=>{
try{ // await 等删完之后再返回结果
return await db.collection("web2019").where({
name:"zxy"
}).remove();
}catch(e){
console.log(e);
}
}
小程序云开发-云存储-5GB
(1)用户上传文件流程
-用户选择相册或拍照
-小程序上传所选中图片
-云存储返回图片 fileID //在云存储图片地址
(2)开发流程
-选择图片
-上传图片
wx.cloud.uploadFile();
cloudPath: 上传成功后新文件名
filePath: 选中图片名
success:res=>{ 上传成功
console.log(res.fileID);
上传成功后返回指定文件路径
}
例子：如下
Page({ data: {}, downP(){//自定义构造函数downP(){ } wx.chooseImage({ count: 1 , //一次选择几张图片默认 9 sizeType: ["original", "compressed"], //选中图片类型 (原图/压缩) sourceType: ["album", "camera"], //图片来源 (相册/相机) success: function (res) { //选中图片成功回调 var list = res.tempFilePaths //选中图片地址,返回数组 var file = list[0] //选中的图片地址 wx.cloud.uploadFile({ //上传图片至云存储 cloudPath: +new Date()+".jpg", //时间戳起一个名字 filePath: file, //选中的要上传的图片地址 success: res => { console.log(res) console.log(res.fileID); //上传成功后返回指定文件路径 } }); } }); }, onLoad: function (options) {}, onReady: function () { }, onShow: function () {}, onHide: function () {}, onUnload: function () {}, onPullDownRefresh: function () {}, onReachBottom: function () {}, onShareAppMessage: function () {} })
综合例子
文件上传与显示功能：利用云函数将图片上传到云存储，再将云存储中的图片地址存储到云数据库的集合中
*云数据库创建集合 myphoto 目标:保存上传文件fileID
*创建组件 pages/myphoto/myphoto
*添加按钮 "上传图片"
*将上传文件fileID保存myphoto中
*创建按钮 "显示图片"
*获取集合中myphoto 创建循环遍历 fileID
<image src="{{item.fileID}} "></image>
const db = wx.cloud.database(); //初始化默认数据库 Page({ data: { // 通过this.setData({}) 添加数据 list:[] //云存储图片fileID }, showPic(){//此函数负责获取myphoto集合所有记录，并且显示在模板中 db.collection("myphoto").get()//获取集合中所有的记录 .then(res => { var result = res.data console.log(result) this.setData({ //向data中添加数据 list:result }) }) .catch(err => { console.log(err)}) }, myupload(){ wx.chooseImage({//此函数负责选中图片并且上传至云储存，上传成功后将图片fileID保存myphoto集合中 count: 1, //一次选择几张图片默认 9 sizeType: ["original", "compressed"], //选中图片类型 (原图/压缩) sourceType: ["album", "camera"], //图片来源 (相册/相机) success(res){ //选中图片成功回调 var list = res.tempFilePaths //选中图片地址,返回数组 var file = list[0] //选中的图片地址 wx.cloud.uploadFile({ //上传图片至云存储 cloudPath: +new Date() + ".jpg", //时间戳起一个名字 filePath: file, //选中的要上传的图片地址 success(res){ var fID = res.fileID //上传成功后返回指定文件路径 db.collection('myphoto').add(//向集合中添加数据 { data: { fileID : fID }, success(res){console.log(res)}, fail(err){ console.log(err) } } ) }, fail(err){ //上传失败 返回err console.log(err) } }); }, fail(err){ console.log(err) } }); }, onLoad: function (options) { }, onReady: function () { }, onShow: function () { }, onHide: function () { }, onUnload: function () { }, onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
环境id报错，如果有两个环境id，一直报错，配置如下
小程序--商城项目-下载安装vant 第三方库
有赞团为vant网站
https://youzan.github.io/vant-weapp
(1)创建项目描述文件 package.json 默认没有package.json,需要自己创建 如何创建? 如下
右击 miniprogram 目录->选中在终端中打开
输入命令 npm init 回车 回车 ..
#npm init 功能生成项目描述文件 package.json
#执行成功后生成 package.json文件
(2)通过npm 安装vant 第三方组件库
右击 miniprograme 目录->选中在终端中打开
输入命令 npm i vant-weapp -S --production 回车
#安装成功看到文件夹 node_modules
#右击miniprograme 在硬盘打开
(3)点击工具菜单-->构建npm
#将node_modues内容复制一份 miniprogram_npm
#常见错误 module .. not defined
#请重新登录
解决:点击工具菜单->构建npm
(4)点击工具菜单->详情 （点击右上角详情）
[*] 使用npm 模块
(5)在组件中配置要使用哪个第三方组件，比如使用button
"usingComponents": {
"van-button": "vant-weapp/button/index"
}
#注意:组件路径修改与miniprogram_npm下目录结构相同
(6)在当前组件中使用button按钮
<van-button type="default">默认按钮</van-button>
小程序--商城项目-娱乐
(1)电影列表从"豆瓣网"下载最新电影列表
豆瓣网热映电影列表
http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=0&count=10
第一个部分:接口地址
第二个部分:apikey=密钥(别人开发者密钥)
第三个部分:start 第几条记录开始
count 本次查询几条记录
(2)如何获取"豆瓣网"热映电影列表-发送ajax请求
小程序有二种请求数据方式
|
小程序端 |
云函数 |
|
|
发送方法 |
wx.request({}) |
下载第三方ajax 库 (request) |
|
协议支持 |
只支持https |
根据第三方库决定 |
|
是否备案 |
经过ICP备案 |
可以不备案 |
|
域名个数 |
最多20个 |
无限制 |
开发云函数获取"豆瓣"电影列表
-创建云函数 movielist3
-点击movielist3 鼠标右键->终端打开
#注意下面命令有顺序
npm install --save request
npm install --save request-promise
#此次请求使用ajax库 request-promise
#上面库是request-promise 依赖库
开发云函数
(1)引入 request-promise 库
var rp = require("request-promise");
(2)导出创建main函数
exports.main = async (event,context)=>{}
event:事件对象保存请求参数
context:上下文对象 用户openid appid..
(3)创建url 请求地址
var url = `http://api..&start=${event.start}
&count=${event.count}`;
(4)rp(url) 返回查询结果
代码如下
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数movellist3，此函数功能：向豆瓣网发送请求，获取最新热映电影列表 // 01 引入第三方ajax库 request-promise // 02 创建main函数 // 03 创建变量 url 请求地址 // 04 请求rp函数发送请求并且将豆瓣返回电影列表返回调用者 var rp = require("request-promise"); exports.main = async (event, context) => { return event var url = `http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}` return rp(url) //发送请求 .then( res=>{ //请求成功 return res } ) .catch( err=>{ console.log(err) } ) }
上拉加载
拼接
// pages/home/home.js Page({ data: { list:[] }, loadMore(){ wx.cloud.callFunction({ //调用云函数 name: "movielist3", //云函数名 data: { start:this.data.list.lenght, count:10 } //参数 }).then(res => { //调用成功 var obj = JSON.parse(res.result)//将字符串转为js对象 var rows = obj.subjects;//保存电影列表的数据 rows = this.data.list.concat(rows)//将电影列表数组拼接操作 this.setData({ list: rows //保存电影列表subjects电影列表 }) console.log(obj.subjects) }).catch(err => { //调用失败 console.log(err); }) }, onLoad: function (options) { this.loadMore() }, onReachBottom: function () {//页面上拉触底事件的处理函数 this.loadMore()//发送请求下载下一页的数据 }, onReady: function () {}, onShow: function () {}, onHide: function () {}, onPullDownRefresh: function () {}, onShareAppMessage: function () { } })
商城--娱乐详情完成-准备
(1)创建组件 comment
(2)创建云函数getDetail3 获取某部电影详细信息
(3)下载安装两个依据ajax
npm install --save request #依赖库
npm install --save request-promise #请求库
#每个云函安装自己所需依赖
(4)检查url 豆瓣电影详情 url
http://api.douban.com/v2/movie/subject/26794435?apikey=0df993c66c0c636e29ecbb5344252a4a
(5)上传部署云函数
(6)云测试
小程序发送ajax
const cloud = require('wx-server-sdk')
cloud.init()
/* s
功能：发送ajax请求获取豆瓣电影详情内容
01引入第三方库request-Promise
02创建main函数
03向豆瓣发送请求
04返回豆瓣电影详情内容
*/
var rp = require("request-promise");
exports.main = async (event, context) => {//event--接收参数， context--上下文对象
var url = `http://api.douban.com/v2/movie/subject/${event.id}?apikey=0df993c66c0c636e29ecbb5344252a4a`
return rp(url) //发送请求
.then(res => {return res} )//函数执行成功
.catch( err => {console.log(err)} )
}
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数movellist3，此函数功能：向豆瓣网发送请求，获取最新热映电影列表 // 01 引入第三方ajax库 request-promise // 02 创建main函数 // 03 创建变量 url 请求地址 // 04 请求rp函数发送请求并且将豆瓣返回电影列表返回调用者 var rp = require("request-promise"); exports.main = async (event, context) => { var url = `http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}` return rp(url) //发送请求 .then( res=>{ //请求成功 return res } ) .catch( err=>{ console.log(err) } ) }
商城--娱乐详情完成-开发(第三方组件库 vant)
https://youzan.github.io/vant-weapp/ 文档手册
(1)输入框
(2)打分
(3)上传按钮
商城--娱乐详情完成-输入框
(1)查看手机
(2)打开配置文件comment.json
#删除多余目录 path/to/dist
{
"usingComponents": {
"van-field": "vant-weapp/field/index",
"van-button": "vant-weapp/button/index",
"van-rate": "vant-weapp/rate/index"
}
}
(3)在模板中使用组件 comment.wxml
<van-field
value="{{ value }}" //用户输入内容
placeholder="请输入用户名" //占位符
bind:change="onChange" //输入事件
/>
(4)在模板中使用组件 comment.js
Page({
data: {
value: ''
},
onChange(event) {
console.log(event.detail);
}
});
背景虚化 效果
/* pages/comment/comment.wxss */ /* 1 电影背景图片虚化效果 */ .detai-container{ /* position: relative; */ height: 400rpx; filter: blur(40rpx); /* 模糊滤镜 */ opacity: 0.9 /*透明度 */ } /* 2 电影背景遮罩层，显示电影背景底图 */ .detail-mask{ position: absolute; width: 100%; height: 400rpx; background: #333; /* 深色的背景 */ top:0; left: 0; z-index: -1; /*显示在底层*/ } .detail-info{ position: absolute; display: flex; /*弹性布局*/ top:0; left: 0; width: 100%; height: 400rpx; /*高度与遮罩层一致*/ padding: 20rpx } .detail-img{ width: 280rpx; /* 大图宽度 */ height: 90%; /* 大图高度 */ margin-right: 24rpx; /* 与右侧文字间距 */ }
微信加载中