Basic knowledge reserve of WeChat mini program

                                                       

[Related learning recommendations: WeChat Mini Program Development Tutorial]

Resource path description

• When introducing static resources into the template, such as the src attribute of image, video and other tags, you can use relative paths or absolute paths

<!-- 绝对路径，/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 files or script tags (including renderjs, etc. ) When introducing js files, you can use relative paths and absolute paths. js files do not support the introduction of / beginning with /

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

• When introducing css files into css files or style tags (the same applies to scss and less files), you can use Relative paths and absolute paths.

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

• The image path referenced in the css file or style tag can use a relative path or an absolute path. It should be noted that some applet css files are not allowed to reference local files

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

Life cycle

Application life cycle

##onLaunchTriggered when uni-app initialization is completed (global Only triggered once)onShowWhen uni-app starts, or enters the foreground from the backgroundonHideWhen uni-app enters the background from the foregroundonErrorTriggered when uni-app reports an error

Function name	Description

Page life cycle

##Function nameonLoadonShowonReady#onHideonUnloadonResizeonPullDownRefreshonReachBottom onTabItemTaponShareAppMessageonPageScrollonNavigationBarButtonTaponBackPressonNavigationBarSearchInputChangedonNavigationBarSearchInputConfirmedsonNavigationBarSearchInputClicked

Description
Listen to page loading, the parameter is the data passed on the previous page, and the parameter type is Object (used for page parameters)
Listen to the page display. Triggered every time the page appears on the screen, including returning from the lower-level page point to reveal the current page
Listens for the completion of the initial rendering of the page. Note that if the rendering speed is fast,
will be triggered before the page entry animation is completed
Listen for page unloading
Listen for window size changes
Monitor the user's pull-down action, generally used for pull-down refresh
Handling function for page pull-down event
Triggered when tab is clicked, the parameter is Object
The user clicks the upper right corner to share
Listen to page scrolling, the parameter is Object
Listen to the native title bar button click event, the parameter is Object
Listen for page return, return event = {from:backbutton, navigateBack}, backbutton indicates that the source is the return button in the upper left corner or the android return key; navigateBack indicates that the source is uni.navigateBack
Listen to native title bar search input box input content change events
Listen to native Title bar search input box search event, triggered when the user clicks the "Search" button on the soft keyboard
Listen to the native title bar search input box click event

Vue life cycle

Function name##beforeCreate—created —beforeMount—mounted—beforeUpdate—updated—beforeDestroy —destroyed—

路由

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

路由跳转

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

页面栈

Description

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

运行环境判断

// 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/                                                 

The above is the detailed content of Basic knowledge reserve of WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!