Grundlegende Wissensreserve des WeChat-Miniprogramms

                                                       

【Verwandte Lernempfehlung: WeChat Mini-Programmentwicklungs-Tutorial】

Ressourcenpfadbeschreibung

• Wenn Sie statische Ressourcen in die Vorlage einfügen, wie z. B. das src-Attribut von Bildern, Videos und anderen Tags, können Sie dies tun Verwenden Sie relative Pfade oder absolute Pfade. Wenn Sie JS-Dateien in Pfad-

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

• JS-Dateien oder Skript-Tags (einschließlich RenderJS usw.) einfügen, können Sie relative Pfade und absolute Pfade verwenden. js-Dateien unterstützen nicht die Einführung von / beginnend mit

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

• Beim Einfügen von CSS-Dateien in CSS-Dateien oder Style-Tags (dasselbe gilt für SCSS- und weniger-Dateien) können Sie relative Pfade und absolute Pfade verwenden.

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

• Der in der CSS-Datei oder im Style-Tag referenzierte Bildpfad kann einen relativen oder einen absoluten Pfad verwenden. Es ist zu beachten, dass einige Applet-CSS-Dateien nicht auf lokale Dateien verweisen dürfen

Lebenszyklus

App-Lebenszyklus

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

Seiten-Lebenszyklus

函数名	说明
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-Lebenszyklus

路由

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 、使用组件

运行环境判断

// uEnvDev
if (process.env.NODE_ENV === 'development') {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
    // TODO
}

页面样式与布局

单位

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

样式导入

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }</style>

flex布局

<style>/*主要有两个概念 容器与项目*/
 .container{
    display: flex; 
    flex-direction:row;
    flex-wrap:nowrap;
    flex-flow: row nowrap;/*简写方式*/
    justify-content: center;/*定义项目在主轴上的对齐方式*/
    align-items:center;/*定义项目在交叉轴上如何对齐*/}.item {
  order: 1;
  flex-grow:0;/*定义项目的放大比例*/
  flex-shrink:1;/*定义了项目的缩小比例*/
  align-self:auto;/*单个项目有与其他项目不一样的对齐方式*/}</style>

定义全局变量

• 共用模块
• Vue.prototype
• globalData
• Vuex

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

class与style绑定

支持数组合对象的方式

计算属性

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

条件渲染

v-if v-show

列表渲染

v-for 注意携带key

事件处理

// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推荐使用longpress代替
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'}

表单控件绑定

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

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

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

常见问题

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

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

uni统计官网地址：tongji.dcloud.net.cn/                                                 

Das obige ist der detaillierte Inhalt vonGrundlegende Wissensreserve des WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!