纯手写Uni-app入门教程，堪称巅峰之作(阿里之作手写巅峰堪称)「uniapp手写板」

uView

uni-app2018年初发布以来，一直蓬勃发展，一派欣欣向荣，社区也是人声鼎沸，众望所归。

因此，uView应运而生，uView的目标是成为uni-app生态最优秀的UI框架。

关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意。

基础组件的性能是高于扩展组件的。

数据的展示

定义：在data定义

使用：在tempelate中插值{{ }}使用，不需要使用this

注意点：在属性中不需要括号，属性名前需要加‘：’，这一点区别于微信小程序。

数据循环

微信小程序中的用法

wx:for="{{数据源}}" wx:for-index="index的别名" wx:for-item="item的别名"

vue中的用法

vue-for="item in 数据源" 或者 vue-for="（item，index） in 数据源"<view v-for="(item) in list" :key="item.id"> {{item.name}} --- {{item.id}}</view>// 数组list: [ {id:0,name:'张三'}, {id:1,name:'李四'}, {id:2,name:'王五'},]条件编译

v-if：操作DOM，需要重新编译，所以不适合频繁切换v-show：只操作样式，不管显不显示，都会存在这个元素

计算属性

类似于计算数据的处理接口，减少在模板中对数据的复杂逻辑操作，比如数据过滤，去除不要渲染的某个或某些数据

// 使用计算属性<view> <view v-for="item in filterList" :key="item.id"> {{item.name}} </view></view>// 计算属性节点computed:{money(){return "$" + this.num},filterList(){ // 使用过滤 return this.list.filter(item=>item.id<=0) } }

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测，filter() 不会改变原始数组。
是JS数组的方法，不是vue中的过滤器，常见的有forEach, map, filter。

案例1：和vue用法一致同样使用@click="handleClick"

<template></template> <view> <view @click="handleClick">点击</view> </view></template><script> export default { methods:{ handleClick () { console.log('view被点击了，事件被触发，函数被执行'); } } }</script><style lang="scss"></style>

案例2：传自定义属性

自定义属性来自微信原生小程序

<template> <view> <view data-index="11" @click="handleClick1($event)">点击1</view> </view></template><script> export default { methods:{ handleClick1 (event) { // event.currentTarget.dataset.index console.log(event) } } }</script><style lang="scss"></style>

案例3：传自定义属性+普通参数放置的顺序可以灵活调整

<template> <view> <view data-index="11" @click="handleClick1($event,1)">点击1</view> </view></template><script> export default { methods:{ handleClick1 (event,index) { console.log(event); console.log(index); } } }</script><style lang="scss"></style>

组件的使用流程定义、引入、注册、使用。

组件的传参父向子：父向子先父，属性

子向父：子向父先子，事件

uni-app全局数据传递

第一种方式：在main.js中定义，使用this.baseUrl 直接调用Vue.prototype.baseUrl = 'www.baidu.com ' + ' Vue.prototype.baseUrl'

第二种方式：在App.vue中定义，使用getApp().globalData.baseUrl 调用globalData:{ baseUrl:'www.baidu.com ' + ' getApp().globalData.baseUrl' }

第三种方式：vue中vuex的用法，这一点参考vue官方文档。

第四种方式：本地存储，请查看官方文档API。

组件的插槽

父向子通过 slot标签占位 传递具体的标签注意：输入框input没有颜色，表面看不见，slot标签需要被view标签包裹，否则不会显示。

uni-app的生命周期

参考链接

应用 onlaunch 当uni-app 初始化完成时触发 App.vue

页面 onLoad 监听页面加载 页面.vue

组件 created 当组件创建完成 mounted 当组件创建完成完成 组件.vue

微信小程序的生命周期

参考链接

vue的生命周期

参考链接

// 安装vue脚手架npm install -g @vue/cli// 创建uni-app项目vue create -p dcloudio/uni-preset-vue my-project// 模板选择选择默认模板// 运行生成mp-weixin文件夹npm run dev:mp-weixinnpm run dev:h5 // 直接在浏览器输入本地URL访问// 如果是微信小程序，则需要导入生成的文件夹mp-weixin编译运行，位置：my-project\dist\dev\mp-weixin打开微信开发者工具

H5运行效果

微信小程序运行效果

微信小程序运行效果

02 HBuilder X面板创建项目

04 基本配置、清理Sass样式使用配置

npm install sass-loader node-sass

compile-node-sass编译插件安装

编译scss/sass为css。
uni-app编译或对文件右键-外部命令编译时使用

<template></template><script> export default { }</script><style></style>内置Sass样式使用

<template> <view class="content"> <view class="rpx">rpx</view> <view class="vhvw">vw</view> <view class="sass">sass</view> </view></template><script> export default { }</script><style lang="scss">.rpx{ background-color: blanchedalmond; width: 750rpx; height: 150rpx;}.vhvw{ background-color: #2B8ACE; width: 100vw; height: 10vh;}.sass{ background-color: #FFC600; // sass内置样式的使用 color: $uni-color-success;}</style>