前端--uniapp

uniapp

0  创建打包发布

https://zh.uniapp.dcloud.io/quickstart-hx.html

 

0  vue语法

https://learning.dcloud.io/#/?vid=8

v-if、v-else，v-show, v-model（双向绑定数据可以影响Ui,ui可以影响数据例如input，常用于表单数据），v-on绑定事件缩写成@, v-bind 绑定任意属性(设置动态值)缩写成 :  例如  <a :href="url”>…</a>

https://hx.dcloud.net.cn/Tutorial/Language/vue

3.0语法

https://hx.dcloud.net.cn/Tutorial/Language/vue-next

 

 

 

0   vue页面基本结构

<template>

<view>

注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。

</view>

</template>

 

<script>

export default {

 

}

</script>

 

<style>

</style>

https://uniapp.dcloud.io/frame?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84

https://zh.uniapp.dcloud.io/tutorial/project.html

https://zh.uniapp.dcloud.io/tutorial/page.html

 

标准小程序结构：

• 原来app.json被一拆为二。页面管理，被挪入了uni-app的pages.json；非页面管理，挪入了manifest.json
• 原来的app.js和app.wxss被合并到了app.vue中

 

pages.json配置

https://zh.uniapp.dcloud.io/collocation/pages.html

mainfest.json配置

https://zh.uniapp.dcloud.io/collocation/manifest.html

 

 

 

 

 

0  组件导入

<script>

import uniBadge from "../../../components/uni-badge.vue";//1.导入组件,  注意大小写 和  去掉 中间 - 

</script>

emplate>

 

<view>

<uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->

</view>

</template>

 

// 如需要全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理。

//main.js

import pageHead from './components/page-head.vue' //导入

Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。

 

// 公共的样式可以写在入口文件App.vue 的<style>…</style> 中

@import ‘./component/abc.css’;

 

 

Ps:  easy com 引入，

https://uniapp.dcloud.net.cn/collocation/pages.html#easycom

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

只要组件路径符合规范（具体见下），就可以不用引用、注册，直接在页面中使用。如下：

<template>

<view class="container">

<comp-a></comp-a>

<uni-list>

</uni-list>

</view>

</template>

<script>

// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用

export default {

data() {

return {}

}

}

</script>

复制代码

路径规范指：

安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue

安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue

easycom  pages.json配置

"easycom": {

    "autoscan": true, //是否自动扫描组件

    "custom": {//自定义扫描规则

      "^uni-(.*)": "@/components/uni-$1.vue"

    }

  },

 

 

 

 

0  入口程序文件App.vue生命周期

https://uniapp.dcloud.net.cn/collocation/app.html#applifecycle

 

 

 

0  获取ref 元素 this.$refs.*

vue支持给组件设ref（引用标记），这类似于之前html中给一个dom元素设id，然后在js中也可以用this.$refs.xxx来获取

@如果父组件想要调用子组件的方法

vue会给子组件添加一个ref属性，通过this.$refs.ref的值便可以获取到该子组件，然后便可以调用子组件中的任意方法，例如：

//子组件

<bar ref="bar"></bar>

 

//父组件

this.$ref.bar.子组件的方法

 

 

 

 

0   事件,冒泡 @click.stop

<button v-on:click="counter += 1">Add 1</button>

<button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡

 

 

@  父子组件通信 , this.$eimit—2.0, defineEmit()—3.0

1.子组件的使用

在vue中，需要：

1. 编写子组件
2. 在需要使用的父组件中通过import引入
3. 在vue的components中注册
4. 在模板中使用

 

//子组件 bar.vue

<template>

  <div class="search-box">

    <div @click="say" :title="title" class="icon-dismiss"></div>

  </div>

</template>

<script>

export default{

props:{  // 3.0用defineProps({….})

    title:{

       type:String,

       default:''

      }

    }

},

methods:{

    say(){

       console.log('明天不上班');

       this.$emit('helloWorld')

    }

}

</script>

 

// 父组件 foo.vue

<template>

  <div class="container">

    <bar :title="title" @helloWorld="helloWorld"></bar>

  </div>

</template>

 

<script>

import Bar from './bar.vue'

export default{

data(){

    return{

        title:"我是标题"

    }

},

methods:{

    helloWorld(){

        console.log('我接收到子组件传递的事件了')

    }

},

components:{

    Bar

}

</script>

 

 

 

Vue3 uni.request 使用

// 默认方式

uni.request({

  url: "https://www.example.com/request",

  success: (res) => {

    console.log(res.data);

  },

  fail: (err) => {

    console.error(err);

  },

});

 

// 使用 Promise then/catch 方式调用

uni

  .request({

    url: "https://www.example.com/request",

  })

  .then((res) => {

    // 此处的 res 参数，与使用默认方式调用时 success 回调中的 res 参数一致

    console.log(res.data);

  })

  .catch((err) => {

    // 此处的 err 参数，与使用默认方式调用时 fail 回调中的 err 参数一致

    console.error(err);

  });

 

// 使用 Async/Await 方式调用—同步方式

async function request() {

  try {

    var res = await uni.request({

      url: "https://www.example.com/request",

    });

    // 此处的 res 参数，与使用默认方式调用时 success 回调中的 res 参数一致

    console.log(res);

  } catch (err) {

    // 此处的 err 参数，与使用默认方式调用时 fail 回调中的 err 参数一致

    console.error(err);

  }

}

 

 

 

 

 

1  uni-forms —组件代表 ,uList

https://zh.uniapp.dcloud.io/component/uniui/uni-forms.html

 

表单校验还可以直接通过 uniCloud web 控制台 快速根据 schema 自动生成表单维护界面，比如新建页面和编辑页面，自动处理校验规则，更多参考

 

https://doc.dcloud.net.cn/uniCloud/schema.html

 

 

 

2  uni-sass  —自带样式

uni-scss 是 uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。

#

uni-ui.scss 还提供了一批辅助样式 ，目的是供用户完成快速布局。 需要用户决定是否使用 ，如果使用的话css会增大 27kb 左右 使用需在 App.vue <style lang='scss'> 中引入

 

https://zh.uniapp.dcloud.io/component/uniui/uni-sass.html

 

css的变化

标准的css基本都是支持的。

选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。微信小程序即是如此。

page{

 

}

复制代码

单位方面，px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D

 

uni-app推荐使用flex布局， 注意css里背景图和字体文件，尽量不要大于40k，因为会影响性能。在小程序端，如果要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用。

 

 

 

 

3  uni. api代表

但基本就是小程序的api，把wx.xxx改为uni.xxx即可

https://uniapp.dcloud.net.cn/api/

uni.showmodel

uni.request

uni.storage

 

 

  

 

4  条件编译

https://uniapp.dcloud.net.cn/tutorial/platform.html

 

 

 

 

 

5  uni扩展组件，三方组件，sdk, 模版项目

https://ext.dcloud.net.cn/

 

 

 

6  原理和和vue, h5 区别

但浏览器专用的window、document、navigator、location对象，包括cookie等存储，只有在浏览器中才有，app和小程序都不支持。

可能有些人以为js等于浏览器里的js。其实js是ECMAScript组织管理的，浏览器中的js是w3c组织基于js规范补充了window、document、navigator、location等专用对象。

在uni-app的各个端中，除了h5端，其他端的js都运行在一个独立的v8引擎下，不是在浏览器中，所以浏览器的对象无法使用。如果你做过小程序开发，对此应当很了解。

https://zh.uniapp.dcloud.io/vernacular.html

https://segmentfault.com/a/1190000015684864

https://zh.uniapp.dcloud.io/resource.html

https://zh.uniapp.dcloud.io/tutorial/

 

 

 

7  夸端注意

https://zh.uniapp.dcloud.io/matter.html

 

 

 

8  ts  开发 

https://zh.uniapp.dcloud.io/tutorial/typescript-subject.html

 

<script lang="ts">

const TAB_OFFSET = 1; // 外层静态变量不会跟随页面关闭而回收

import charts from 'charts.ts'; // 导入外部js/ts模块

import swiperPage from 'swiper-page.vue'; //导入非easycom的组件

type GroupType = {

id : number,

title : string

} // 在ts中，为下面data数据的 groupList 定义类型

export default {

components: {

    swiperPage

}, // 注册非easycom组件

data() {

return {

groupList: [

{ id: 1, title: "第一组" },

{ id: 2, title: "第二组" },

] as GroupType[], // 为数据groupList定义ts类型

}

},

onLoad() {},

methods: {}

}

</script>