uniapp基础、uView引入与项目开发指引

安装

全局安装 vue-cli （要求是@4）

npm i -g @vue/cli@4

创建并运行uni-app

uni-app项目创建项目，拉取模板

语法： $ vue create -p dcloudio/uni-preset-vue 项目名称

拉取失败，解决方案⬇：

一、首先，在下载模板地址下载dcloudio/uni-preset-vue

二、然后 把指令改为 $ vue create -p 工具项目路径 项目名
❌项目名称不能包含大写字母

选择 默认模版

找到 项目中 src/manifest.json的 mp-weixin节点 填写appid

APPID在：【微信开发者】–【开发管理】–【开发设置】

运行命令 运行微信小程序

npm run dev:mp-weixin

在微信开发者工具中 来导入项目即可

❗要导入的是项目下的 dist/dev/mp-weixin

• 不出现此页面，查看一下是不是没有登录微信开发者工具

开发uniapp的注意点

1. 不要直接在微信开发者工具中 修改代码

实际工作中，不能直接改编译好后的代码，要改就应该改 项目的源代码

2. 开发时，标签尽可能使用小程序的，而语法尽可能使用vue的

easycom 组件引入方式

在uniapp中 引入组件的方式 变为两个步骤

1. 必须按照固定格式创建组件

   • /components/组件名称/组件名称.vue

2. ❗在页面中直接使用组件

为什么要使用它

1. 支持promise（原生小程序一些api不支持）

   • 封装自己的 Promise(改造 wx.request )

   

2. 跨平台，一段代码 直接运行到不同的平台上 （web、小程序、手机app）

uview

在uniapp 引入uview

1. 安装依赖

   npm i uview-ui@2.0.31 sass sass-loader@10
   

2. 在 src/main.js 文件中 全局引入 js库

   import uView from "uview-ui";
   Vue.use(uView);
   

3. 在 uni.scss 中 引入 uview 的 sass 主题库

   @import "uview-ui/theme.scss";
   

4. 在 App.vue 中 引入 uview 的 sass 主题库
   ❗注意！

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
@import "uview-ui/index.scss";
</style>

5. pages.json 中 配置 easycom

   {
   	"easycom": {
   		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
   	},
   	
   	// 此为本身已有的内容
   	"pages": [
   		// ......
   	]
   }
   

6. Cli模式额外配置
   如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置：

// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}

7. 在 页面中 使用 uview的按钮
   <u-button type="primary" icon="map" text="图标按钮"></u-button>

批量导入uview组件的方法

如，想批量导入以下组件：

1. 下载 uview源码地址，在vscode打开
2. 在vscode全局查找方法：
3. 找到的样式和css复制到自己的项目即可

补充

uniapp项目使用 vuex管理状态的基本使用

创建新页面的方法：跟vue项目一样（在src/pages/index1/index1.vue），同时要在 pages.json中加上：

uniapp注册组件和注册页面

组件

定义 src/components/MyButton/Mybutton.vue

<template>
  <button>{{ '苹果' }}</button>
</template>

<script>
</script>

<style>
</style>

easycom 组件引入方式

在uniapp中 引入组件的方式 变为两个步骤

1. ❗❗必须按照固定格式创建组件

   • /components/组件名称/组件名称.vue

2. ❗在页面中直接使用组件

页面

定义pages/goods/goods.vue

在 pages.json的 pages节点 注册

{
  "path": "pages/goods/goods",
  "style": {
    "navigationBarTitleText": "商品选择"
  }
}

uniapp的组件和API调用

组件跳转页面

<navigator url="/pages/demo/demo">跳转到demo页</navigator>

JS方式跳转页面

<button @tap="gotoPage">点击按钮跳转</button>

gotoPage() {
    // API 要考虑平台兼容性，使用 uni 封装的 API
    uni.navigateTo({
      url: '/pages/demo/demo'
    })
  }

uniapp新增数据

this.list.unshift(this.str)

• ❗uniapp 中不要使用 this.setDate()

删除数据

this.list = this.list.filter(item => item != delVal)

父传子-子传父-类名绑定

子组件通过 props 接收

props: {
  item: {
    type: String
  }

this.$emit() 触发父组件的自定义事件

子：

this.$emit('send', this.item)

父：

<Goods @send="sendFn">

sendFn(val) { this.activeGoods = val }(接收子组件传过来的数据)

:class 动态类名绑定

:class="{ active: activeGoods === item }