小程序开发和 h5 开发有什么区别?
1.运行环境不同:
h5运行环境是浏览器,包括webview,而微信小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器,小程序的运行环境并不是完整的浏览器,只是用到了一部分的h5技术,
2.开发成本不同:h5开发成本比小程序高,
3.获取系统的权限不同:微信小程序相对于H5能获得更多的系统权限,比如网络通信状态、数据缓存能力等,这些系统级权限都可以和微信小程序无缝衔接。
小程序的生命周期钩子有哪些?
先说全局的钩子函数有哪些
页面的生命周期钩子有哪些
自定义组件的钩子有哪些
onShow和onLoad钩子的区别?
onShow是小程序页面 第一次开始显示 路由切回当前页面,会触发多次
正常路由跳转 在页面没有卸载情况下,onshow会多次触发,onLoad只会触发一次
小程序那些场景下会触发卸载onUnload钩子?
1.跳转时,使用open-type="redirect"或者reLaunch跳转
2.返回上一页时
小程序如何实现下拉刷新?
1.配置中开启下拉刷新
"enablePuflDownRefresh": true
2.页面js中下拉事件监听函数中,请求列表数据
onPullDownRefresh(){
// 这里请求列表
}
3.请求成功后 调用 wx.stopPullDownRefresh() 结束下拉loading状态(真机上看效果)
wx.stopPul1DownRefresh()
页面中如何开启 分享 朋友或者朋友圈
1.定义事件监听函数
2.调用api ,在点击胶囊按钮 点亮 分享按wx.showSharemenu
getCurrentPages()
获取 以及打开的 所有页面实例,返回一个数组,第0个是 首页实例,最后一个是当前页
怎么理解小程序的rpx动态单位?
rpx是小程序中用于设置元素大小的动态单位。它是相对像素的意思,为了实现在不同设备上的自适应效果
我们一般使用像素(px)作为单位,然而,由于不同设备具有不同的屏幕尺寸,使用像素作为单位可能导致在不同设备上显示效果不一致。
为了解决这个问题,小程序引入了rpx单位。rpx根据设备的宽度自动换算成相应的像素值。小程序规定屏幕宽度为750rpx,那么在iPhone6上,2rpx就等于1px(即750rpx / 375px = 2)
使用rpx单位可以实现在不同设备上保持相对一致的显示效果。 在不同设备上,它会自动根据设备宽度进行缩放,以保持大致相同的显示效果。
原生微信小程序跳转传参?
1.非TabBar页面
非TabBar页面的跳转通常使用wx.navigateTo来跳转页面,在链接后面加 ? 传参
// 跳转页面 ? 后面传参 goods_id = 参数
wx.navigateTo({
url: `../goodsDetail/goodsDetail?goods_id=${goodsid}`,
})
// 跳转页面接参
onl oad(options) {
// 此处的options.goods_id 就是页面跳转传过来的参数
this.setData({
goods_id : options.goods_id
})
},
2.TabBar跳转
跳转TabBar页面,一般使用wx.switchTab跳转,跳转TabBar常规的带参方式是不行的,官方文档有说明
// 跳转购物车
jumpCart() {
// 给全局变量添加一个参数 id
getApp().id = 1
wx.switchTab({
url: '/pages/cart/cart'
})
},
// 购物车页面
let app = getApp() // 获取全局变量
Page({
onl oad(options) {
console.log(app.id); // 此处的app.id就是上个页面跳转带过来的参数
},
)}
目标小程序如何获取其他小程序跳转过来携带的参数?
1.携带的参数在目标小程序全局的生命周期钩子的参数里 onLaunch(option)、onShow(option)
onLaunch 冷启动(冷启动:跳到没有打开过的小程序)
onShow 支持冷启动和热启动(热启动:跳到没有打开过的小程序)
2.利用 全局api
①wx.getLaunchCIotionsSync()
与App.onLaunch
的回调参数一致
②wx.getEnterOptionsSync
:获取本次小程序启动时时的参数,如果当前是冷启动,则返回值与 App.onLaunch 的回调参数一致;如果当前是热启动,则返回值与 App.onShow一致