怎样迅速拥有微信小程序的基础知识

GS 277 2024-07-08

资源路径说明

  • template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径

    图片.png

  • js文件或script标签内(包括renderjs等)引入js文件时,可以使用相对路径和绝对路径。js文件不支持使用/开头的方式引入

    图片.png

  • css文件或style标签内引入css文件时(scss、less文件同理),可以使用相对路径和绝对路径。

    图片.png

  • css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径,需要注意的是,有些小程序端css文件不允许引用本地文件


  • 图片.png

生命周期

应用生命周期


函数名说明
onLaunch当uni-app 初始化完成时触发(全局只触发一次)
onShow当 uni-app 启动,或从后台进入前台显示
onHide当 uni-app 从前台进入后台
onError当 uni-app 报错时触发

页面生命周期


函数名说明
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新
onReachBottom页面上拉触底事件的处理函数
onTabItemTap点击 tab 时触发,参数为Object
onShareAppMessage用户点击右上角分享
onPageScroll监听页面滚动,参数为Object
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为Object
onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmeds监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件

Vue生命周期


函数名说明
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

路由

uni-app路由统一有框架管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。

路由跳转

uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转

页面栈


路由方式页面栈表现触发时机
初始化新页面入栈uni-app 打开的第一个页面
打开新页面新页面入栈调用 API   uni.navigateTo  、使用组件
页面重定向当前页面出栈,新页面入栈调用 API   uni.redirectTo  、使用组件
页面返回页面不断出栈,直到目标返回页调用 API  uni.navigateBack   、使用组件  、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换页面全部出栈,只留下新的 Tab 页面调用 API  uni.switchTab  、使用组件    、用户切换 Tab
重加载页面全部出栈,只留下新的页面调用 API  uni.reLaunch  、使用组件

运行环境判断

图片.png

页面样式与布局

单位

px为屏幕像素,rpx响应式px,它们之间的换算公式为750 * 元素在设计稿中的宽度 / 设计稿基准宽度

样式导入

图片.png

flex布局

图片.png

定义全局变量

  • 共用模块

  • Vue.prototype

  • globalData

  • Vuex

参考文章 uni-app全局变量的几种实现方式

class与style绑定

支持数组合对象的方式

计算属性

计算属性是基于它们的响应式依赖进行缓存的

条件渲染

v-if v-show

列表渲染

v-for 注意携带key

事件处理

图片.png

表单控件绑定

推荐使用uni-app的表单组件

组件分为全局组件和局部组件

都存在类似的操作,即导入,注册,使用

常见问题

1、如何获取上个页面传递的数据
onLoad(args)
2、如何设置全局的数据和全局的方法
vuex(uni-app已经内置了vuex)

uni-app自带统计平台,只要稍作配制就可以使用

uni统计官网地址:tongji.dcloud--/                                                 

以上就是怎样迅速拥有微信小程序的基础知识的详细内容!

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:修改微信号所带来的影响究竟有哪些
下一篇:将小程序添加至公众号文章的方法与步骤
相关文章

 发表评论

暂时没有评论,来抢沙发吧~