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 [email protected] 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 主题库

5. pages.json 中 配置 easycom

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

6. 在 页面中 使用 uview的按钮
   

补充

创建新页面的方法：跟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调用

组件跳转页面

跳转到demo页

JS方式跳转页面

点击按钮跳转

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)

父：

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

:class 动态类名绑定

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