一:首先介绍微信整个小程序的生命周期
onlaunch:用户首次打开微信小程序调用的函数
onshow:程序初始化完成
onhide:程序被隐藏
二:介绍微信小程序界面的生命周期
onhide:隐藏 ready:初次渲染 onshow:显示 unload:卸载 onload:加载 ready:组件初始化
界面之间是否摧毁或者隐藏由跳转方式决定
navigateTo:隐藏之前的界面,显示非tabbar界面,有返回按钮,并且最多堆栈到10层
redirectTo:关闭当前的界面,跳转到非tabbar界面,并没有返回按钮
switchTab:跳转到tabbar界面,关闭所有的非tabbar界面
relunch:关闭所有的界面,跳转到任意的界面
navigateBack:返回上一级界面,并且摧毁当前界面
三:组件之间和跳转之间和方法绑定的参数的传参
父传孩:组件之间通过proprites传递参数,现在子组件定义properties定义参数类型和默认值,具体值有父组件调用子组件的时候通过相同的名字调用
子传父:孩:that.triggerEvent("函数名字",传递的参数) 父:bind:父亲的函数="_search(实现的函数)" 然后实现的函数可以通过参数e.detail获取传递数值
跳转之间传递参数来结尾通过?xx=值传递,之后在跳转完成的界面通过onload options传递
方法绑定的传参,在html界面通过data-xx="" 之后在调用的方法中e.currentTarget.dataset.xx就可以调用参数了
子传递父亲:孩子通过this.triggerEvent("up",res)创建一个事件 父亲通过组件,bind-xx()="函数名字" 后可以通过函数名字(e)参数获取数据
四:微信小程序运用到的各种接口和特别的方法
1:wx.request()这个方法相同于ajax,但是默认的是get方法,所以无法传递文件,只能传递文字参数
2:wx.uploadfile()不同于上一个方法,此方法能够上传文件,原理是选择上传的文件变成一个临时路径传递给后端,后端进行处理
3https://api.weixin.qq.com/sns/jscode2session:获取oppenid的接口,将程序的id,秘匙,和用户id一同传给后端,成功则返回用户对于该小程序唯一的oppenid,用来唯一表示用户
4wx.getUserProfile:获取用户的基本信息,包括用户名,用户头像地址,性别,所在城市和语言
5:qq地图提供的特殊函数调用:调用第三方的方法时,要先在第三方注册获得秘匙方能调用:首先先导入注册得到实例对象,后通过对象;qq地图提供将经纬度转化成实例坐标:wxMap.reverseGeocoder({location:经纬度})
6: wx.createMapContext(xx):xx提供map id可以获取此地图对象
7: this.mapCtx.getCenterLocation:获取地图的中心位置,由res给出
五:微信小程序特殊的组件调用
pick:微信小程序好看的下拉框
e.column 当前滑动的列 e.value当前选择的行 单行或者多行选择:有个初始的array,多行选择则是通过方法来替换array的第二个元素 1
map:地图组件 必须有id="" longitude="" latitude="" bindregionchange=""属性,通过bind与js互相照应
六:配置和细节
1:微信小程序需要的接口必须是https,所以必须申请到ssl证书(阿里云可以免费获得),申请成功之后下载pem和key,并将里面的信息布置到宝塔的一键ssl部署中,就可以成功转换
2:小程序不能在前端界面明目张胆的获得用户的秘匙,转化成用户的oppenid,必须要有个后端的中间过度,生成的oppenid必须在后端中生成之后传递给前端
3:springboot编写http请求获得微信小程序的oppenid{
<groupId>com.github.kevinsawicki
<artifactId>http-request
<version>6.0
</dependency>
}导入http请求依赖,在controller中通过路径加上map填装的参数进行请求,就能得到返回
小细节:
wx:if{{里面的所有字符串已经代表了data里面的或者for里面的变量}}
input:value="{{}}"//input的值 focus="{{}}" 是否被聚焦 hold-keyboard="true" //点击input以外是否不失去焦点
setover(定时函数,只触发一次)
setInterval(延时函数,并且一直触发)参数是函数加上时间
变化 class=" {{isOne==1?'OK1':'normal'}}"
scroller-view:跳转到最底部
var len = this.data.array2.length //遍历的数组的长度
this.setData({
scrollTop: 1000 * len // 这里我们的单对话区域最高1000，取了最大值，应该有方法取到精确的
});
云开发技术:
语句顺序:1:创建对象var db=wx.cloud.database() 2:建立连接db.collection('Student'),并且在增删查改的过程中一般使用promise语法.then()回调函数
1:查询操作:db.collection('Student').get().then({})
2:修改操作:db.collection('Student').where({
name:""}).get().then({})
3:增加操作::db.collection('Student').add({data:{}}).then({})
4:删除操作:db.collection('Student').where({}).remove().then({})
5:获取个数操作:db.collection('Student').count().then({})
6:观察函数使用:db.collection('Student').watch({onChange:function(){成功调用},onError:function(){失败调用}})
7:各种查询条件:limit(num)限制返回个数 skip(num)跳过前面的num的数据,从num+1开始 orderBy("排序名","选择正序还是逆序") field({xxx:true}) 对返回结果进行筛选
复杂的sql语句需要用到commond进行
promise语法:选择,逻辑在前面,调用return 在then中正确使用 catch失败调用
安全方面:cloud.openapi.security.msgSecCheck:文字检测 imgSecCheck:图片检测:微信云开发提供的接口,可以检测安全性问题,使用promise语法使用
传统开发 post上传图片一般选择将图片等数据存放在formdata中,然后post上传,微信小程序 使用wx.uploadfile()上传代码,formdata存放数据.传统意义上,get将数据放在params上,post放在request body 中,当然你也可以修改,但是最好不要,参数中都是data选择参数 header{}请求头,配置数据
小程序文件传输都是使用tempFilePath,web开发文件是files[0]
wx.compressImage 压缩图片质量,
开发前要先设计好模板,先用view打好草稿,然后图片一般使用rpx,才不会出现崩裂的情况
