Uniapp

DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

uni-app官网 (dcloud.net.cn)

uni-app

快捷键

Ctrl+Shift+R 复制一行

yarn的安装

npm install -g yarn
npm uninstall yarn -g  //yarn卸载

MuMu模拟器安装模拟器Adb路径

D:/Program Files (x86)/MuMu/emulator/nemu/vmonitor/bin/adb_server.exe

雷电模拟器9 使用

雷电安卓模拟器-手游模拟器安卓版_android手机模拟器电脑版_雷电模拟器官网 (ldmnq.com)

D:/leidian/LDPlayer9/adb.exe

安卓APP证书申请

Android平台签名证书(.keystore)生成指南 - DCloud问答

第一步

• testalias是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字
• test.keystore是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径
• 36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期

keytool -genkey -alias vsticosapp -keyalg RSA -keysize 2048 -validity 36500 -keystore vst.keystore

第二步 回车后会提示

vst123456

Enter keystore password:  //输入证书文件密码，输入完成回车  
Re-enter new password:   //再次输入证书文件密码，输入完成回车  
What is your first and last name?  
  [Unknown]:  //输入名字和姓氏，输入完成回车  
What is the name of your organizational unit?  
  [Unknown]:  //输入组织单位名称，输入完成回车  
What is the name of your organization?  
  [Unknown]:  //输入组织名称，输入完成回车  
What is the name of your City or Locality?  
  [Unknown]:  //输入城市或区域名称，输入完成回车  
What is the name of your State or Province?  
  [Unknown]:  //输入省/市/自治区名称，输入完成回车  
What is the two-letter country code for this unit?  
  [Unknown]:  //输入国家/地区代号（两个字母），中国为CN，输入完成回车  
Is CN=XX, OU=XX, O=XX, L=XX, ST=XX, C=XX correct?  
  [no]:  //确认上面输入的内容是否正确，输入y，回车  

Enter key password for <testalias>  
        (RETURN if same as keystore password):  //确认证书密码与证书文件密码一样（HBuilder|HBuilderX要求这两个密码一致），直接回车就可以

第三步 使用

配置规则验证

eslint-js - DCloud 插件市场

eslint-plugin-vue - DCloud 插件市场

eslint-js 和 eslint-plugin-vue

// 使用单引号
'quotes': ['error', 'single'],
// 禁止多个空格 
'no-multi-spaces': 'error',
//缩进风格
'indent': [2, 4]

制表位

组件开发

安装nvm管理node

安装nvm

nvm ls

D:\tools\前端工具

nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions (github.com)

Releases · coreybutler/nvm-windows (github.com)

安装

nvm list available

 nvm install 18.19.0

nvm use 16.20.2

删除不要的版本

nvm uninstall 16.20.0

查看安装路径

nvm root

安装TypeScript

全局安装

npm install -g typescript

npm view typescript version
tsc -v

测试使用ts如图

出现报错则tsc --init 初始化下

在线技术文档

Web 开发技术 | MDN (mozilla.org)

创建项目

插件安装

Volar安装

安裝浏览器插件

http://www.cnplugins.com/

Vue Devtools_6.5.1_chrome扩展插件下载_极简插件 (zzzmh.cn)

D:\wanglili\mysoft\nhdogjmejiglipccpnnnanhbledajbpd

安装eslint

npm install vite-plugin-eslint --save-dev

新建一个文件.eslintrc.cjs

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "overrides": [],
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "semi": 0
    }
};

在.vscode下新建个settings.json

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue"
    ]
}

安装插件

npm install eslint-plugin-vue --save-dev

npm install @vue/eslint-config-typescript --save-dev

组件开发-创建项目

uniapp 常用语法

组件间的回调

uni.showModal({
title: '提示',
content: data.msg,
showCancel: false,
    success(res) {
    // uni.navigateBack({
    //     delta: 1,
    //     success() {
    //         const pages = getCurrentPages()
    //         const prevPage = pages[pages.length -2]
    //         prevPage.onLoad()
    //     }
    // });

        //调用父页面提交方法
        // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
        let pages = getCurrentPages() 
        //上一页页面实例
        let prevPage = pages[pages.length - 2] 
        // 返回上一页
        // 调用上一页的方法,传参
        uni.navigateBack({ 
        delta: 1,
        success: () => {
            prevPage.$vm.bzSubmit() 
        }
    })
}});

css添加CSS选择

	.spButton :deep(.u-button__text) {
			font-size: 20px !important;
	}