微信小程序基础知识初步（什么是微信小程序基础知识初步）

]

资源路径说明在模板中引入静态资源本例： 您可以使用相对或绝对 在js文件或脚本标签（包括renderjs等）中引入js文件时，可以使用相对路径和绝对路径。 js 文件不支持引入以 // / 开头的绝对路径。 @ 指的是你的项目的根目录。 在cli项目中，@指向src目录。 import add from '@/common/add.js' // 添加从相对路径 '../../common/add.js' 导入在 'css 文件或 style 标签（以及 scss 和 less 文件）中引入 css 文件时，可以使用相对路径和绝对路径。 /* 绝对路径*/@import url('/common/uni.css');@import url('@/common/uni.css');/* 相对路径* /@import url('../. ./common/uni.css');css文件或样式标签中引用的图像路径可以是相对的或绝对的。 请注意，某些小程序 CSS 文件不允许引用本地文件。 /* 绝对路径 */background-image: url(/static/logo.png);background-image: url(@/static /logo.png); /* 相对路径 */background-image : url(../../static/logo.png); 生命周期 应用程序生命周期

函数名称说明：onLaunch是初始化完成时触发(全局只触发一次） onShow 当uni-app启动或者从后台转到前台时 onHide 当uni-app从前台转到后台时 onError 当uni-应用报错时，触发页面生命周期

函数名称 说明 onLoad 监视页面加载。 参数为上一页传过来的数据，参数类型为对象（供页面传递参考）onShow监控页面显示。 每次页面在屏幕上显示时都会触发此事件，包括从依赖页面点返回以暴露当前页面 onReady 以侦听页面的初始渲染完成。 注意，如果渲染速度很快，在进入动画之前会触发onHide监听页面是否隐藏。隐藏 onUnload 监听页面卸载。 onResize 监听窗口大小的变化。 onPullDownRefresh 监视用户的下拉操作。 通常用于更新下拉 onReachBottom 单击选项卡时会触发页面的下拉事件处理函数 onTabItemTap。 参数是ObjectonShareAppMessage。 用户点击右上角分享onPageScroll并观看页面滚动。 监听原生标题栏按钮点击事件的参数是ObjectonNavigationBarButtonTap，监听页面返回的参数是ObjectonBackPress，返回事件={from:backbutton,navigateBack}，backbutton的来源是左上角的后退按钮或者Android表示返回键；navigateBack表示来源为uni.navigateBackonNavigationBarSearchInputChanged。 监控本机标题栏搜索输入框输入更改事件 onNavigationBarSearchInputconfirmeds 监听本机标题栏搜索输入框搜索事件。 用户点击软键盘搜索按钮时触发 onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件 Vue 生命周期

函数名称 说明 beforeCreate—created— beforeMount—已挂载—beforeUpdate—updated—beforeDestroy—destroyed—routing

uni- 应用路由与框架管理集成在一起，因此开发者可以配置路由页面路径和页面样式。 如果你仍然想使用 Vue Router 来管理你的路由，你可以在插件市场中搜索 Vue-Router。

路由跳转

uni-app有两种页面路由跳转方式：使用navigator组件进行跳转，调用API进行跳转。

页面堆栈

性能触发路由模式页面堆栈的新初始化。 page uni- 推送应用程序中打开的第一个页面以打开新页面。 新页面被压入堆栈并调用 API uni.navigateTo。 使用组件页面从堆栈重定向当前页面。 新页面被压入堆栈并调用 API uni.redirectTo。 请使用组件页面返回。 目标返回页面调用API uni.navigateBack，使用组件，页面导航，直到用户按下左上角的后退按钮，Android用户点击物理后退按钮Tab在所有页面之间切换，一直跳转。从堆栈中取出。 使用组件调用 API uni.switchTab 只留下新标签页，用户切换标签页，从堆栈中重新加载所有页面，并调用 API uni.reLaunch 只留下新页面。 组件

执行环境确定

// uEnvDevif (process.env.NODE_ENV === 'Development') { // TODO}// uEnvProdif (process.env.NODE_ENV === 'Production') { / / TODO} 页面样式和布局单位

px 为屏幕像素，rpx 为响应式 px，它们之间的换算公式为 750 * 设计稿元素宽度/设计稿底部宽度

样式导入 @ import "../../common/uni .css"; .uni-card { box-shadow: none; }flexlay/* 容器和项目 2 主要有两个概念。*/ .container{ display: flex; flex-direction:row; flex-wrap:nowrap; flex-flow: row nowrap;/*缩写*/ justify-content: center;/* main axis 定义如何在横轴上对齐项目*/align-items:center;/* 定义如何在交叉轴上对齐项目*/}.item { order: 1; flex-grow :0;/*定义项目的收缩率 */ flex-shrink:1;/* 定义项目的收缩率 */align-self:auto;/*使单个项目与其他项目的放置方式不同 */}的定义全局变量共享模块 Vue.prototypeglobalDataVuex

参见文章 uni-。 在应用程序中实现全局变量的几种方法

类和样式绑定

支持组合对象的方式

计算属性

计算属性根据依赖关系进行反应式缓存

条件渲染

v-if v-show

列表渲染

v-for NOTE CARRY key

事件处理 // 事件映射表，左边是WEB事件，右边是` `uni-app`` 对应事件 { click: 'tap', touch start: '触摸开始', touch move: '触摸移动', touch cancel: '触摸取消', touch end: '触摸结束'，他p:'tap', longtap:'longtap', //input:'input',change:'change',submit:'提交',blur:'blur',focus:'使用长按而不是焦点我们建议你这样做。 '，重置：'重置'，确认：'确认'，columnchange：'列更改'，linechange：'linechange'，错误：'错误'，scrolltoupper：'scrolltoupper'，scrollto lower：'scrollto lower'，scroll：'滚动'} 表单控件绑定

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

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

操作类似，即导入、注册、使用

常见问题

1.如何获取上一页onLoad(args)传入的数据 2.如何设置全局数据和全局方法vuex（uni- app内置了vuex）

uni- app有自己的统计 稍微准备一下就可以使用的平台

大学统计官网地址：tongji.dCloud.net.cn/

微信APP下载

微信是一款支持通过移动网络进行语音短信、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 微信小程序基础知识储备（微信小程序涉及的知识点）

本文由主机参考刊发，转载请注明：微信小程序基础知识初步（什么是微信小程序基础知识初步） https://zhujicankao.com/123419.html