《uniapp的学习完整版.docx》由会员分享，可在线阅读，更多相关《uniapp的学习完整版.docx（21页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、uniapp的学习-1、概念认识官地址：uni-app是个使 开发所有前端应的框架，开发者编写套代码，可发布到iOS、Android、Web（响应式）、以及各种程序（微信/付宝/百度/头条/QQ/钉钉/淘宝）、快应等多个平台。1.1 uni-app优势所在2.2 uni-app和Vue的关系使Vue.js开发发布到H5时，持所有的Vue语法发布到App和程序时，持部分Vue语法3.3 uini-app和微信程序的关系组件标签靠近程序规范接能（js api）靠近程序规范完整的程序周期4.4 写法上的对、重点总结2.1 程序重点2.1.1 程序的命周期程序应的命周期App(/* 当程序初始化完成时
2、，会触发 onLaunch（全局只触发次）*/onLaunch: function () ,/* 当程序启动，或从后台进前台显，会触发 onShow （应进前台）*/onShow: function (options) ,/* 当程序从前台进后台，会触发 onHide （应进后台）*/onHide: function () ,/* 当程序发脚本错误，或者 api 调失败时，会触发 onError 并带上错误信息*/onError: function (msg) )重要概念：1. 后台：当户点击左上关闭（或者右上退出），或者按了home键离开微信，程序并没有直接销毁，是进了后台。2. 前台：当再
3、次进微信或者再次打开程序，会从后台进前台。程序单个页的命周期/* 命周期函数-监听页加载*/onLoad: function (options) ,/* 命周期函数-监听页初次渲染完成*/onReady: function () ,/* 命周期函数-监听页显(页打开的时候触发)*/onShow: function () ,/* 命周期函数-监听页隐藏（页隐藏的时候触发）(打开其他页时当前页就认为被隐藏)*/onHide: function () ,/* 命周期函数-监听页卸载（打开A页进B页，当返回A页的时候就是B页的卸载）*/onUnload: function () ,/* 页相关事件处理
4、函数-监听户下拉动作*/onPullDownRefresh: function () ,/* 页上拉触底事件的处理函数*/onReachBottom: function () ,/* 户点击右上分享*/onShareAppMessage: function () 。onReady页面初次涫染完成2.1.2 列表渲染item - indext - i2.2 uni-app核知识点2.2.1 Vue规范Vue单件组件（SFC）规范uni-app的所有页都需要遵循SFC规范使类Html语法去描述个Vue组件，没个组件包含三种类型的语块：组件标签类似程序规范具体可见4.4写法上的对接能类似微信程序规范
5、例如直接使uni的api数据绑定和处理同Vue.js规范为兼容多段运，建议使flex布局2.2.2 uni-app特点条件编译app端的Nvue的开发weex为程序提供了原的渲染能，Nvue在weex的基础上提供了量uniapp的组件与APIHTML5+协助直接调取原的插件来实现某些功能，例如IOS或安卓。总的来说提升原能。 注意：Nvue和Html5+只能在App上使，在html和程序上是法使的2.2.3 uni-app知识点2.3 环境搭建2.3.1 使HbuilderX软件创建项编写代码推荐使此式！2.3.2 使vue-cli式创建与运项1. 安装vue-clicnpm install
6、vue cnpm install -g vue/cli2. 测试安装结果：vue -V注意：V是写3. 安装uniapp程：vue create -p dcloudio/uni-preset-vue 你的项名注意create命令必须是vue 3.x版本之上，否则会报错:4. 选择默认模式5. 项结构创建的项结构：6. 运npm run serve2.4 uni-app开发基础2.4.1 基础模板语法数据语法export default /初始化数据的法data() return title: Hello,为什么不使对象的式去出初始化数据data呢？ 即：data:,因为这种法会保留上次的值，不
7、会每次都初始化为原来的值，写成法去Return这样使得每次页的值都会被刷新，不会被之前的 值影响事件语法事件语法与Vue相同，与程序不同，注意区分数据绑定、条件判断、列表渲染语法同Vue基础组件使定义组件使(重点)第步：注册的组件创建components件夹在其下创建组件第步：编写组件我创建的组件，哈哈哈export default data() return ;.view-box width: 100rpx; height: 500rpx;border: 1rpx #007AFF solid;第三步：导组件使在script标签位置导import myView from /components
8、/myView/myView.vue export default /导使components: myView,.表项的根录，前的是导的别名拓展1：定义组件传参数（页向组件传参） 例1：props与样式属性相结合：在定义组件vue件中编辑props：我创建的组件，哈哈哈export default props:color:default: red, /参数的默认值type:String, /参数的类型,.：style与v-bind类似，中括号中的两个都是属性名其他页使定义组件并传参数：import myView from /components/myView/myView.vue export
9、 default /导使components: myView,.前的HbuilderX持省略Import和components直接同名调的法例：props可以直接接收页的参数, 并且可以于类似data使。组件：item.nameexport default /props并没有作为样式属性props: categoryList: type: Array, default: name: 分类1,name: 分类2,name: 分类3,data() return ;页：以标签的式载，categoryList是传参对象export default data() return categoryList:
10、 name: 类别1,name: 类别2,name: 类别3,name: 类别4,.拓展2：定义组件事件发送数据（组件向页传参）定义组件编写我创建的组件，哈哈哈export default .methods: myClick()console.log(myView被点击)/发送事件，将当前页的字体颜发送this.$emit(change, this.color)this.$emit() 第个参数是其他页调的事件名，第个参数是发送的参数数据其他页的调与捕获数据：import myView from /components/myView/myView.vue export default /导使c
11、omponents: myView,.methods: .change(e)console.log(接收到了定义组件的点击数据:, e)拓展3：使插槽实现调者设置定义组件内容定义组件使slot其他页调时：我想写什么你就显什么哈啊哈哈基础api法例：调uni.getSystemInfoonLoad() uni.getSystemInfo( success(res) console.log(成功返回, res),fail(err) console.log(失败返回, err),complete(res) console.log(不管成功或者失败, res),条件编译只编译对应平台的代码显对应的平台
12、，不会编译冗余的代码，在组件的注释中实现：title我只能在App上看见加上个n表只有H5不显，其他都显条件编译在模板、script、style都可以使，都是包含在对应的注释中页布局外部样式导语法import url(./index.css);/* 或者 */import ./index.css;2.4.2 uni-app的命周期1 应命周期应的命周期在App.Vue中：export default / 应初始化完成出发出发次,全局只出发次onLaunch: function() /登录或些全局变量的获取console.log(App Launch),/应从后台切换到前台触发次onShow:
13、function() console.log(App Show),/应从前台切换到后台触发次onHide: function() console.log(App Hide)2 页命周期在对应的页的.vue件中：export default /监听页加载，页标签等加载之前触发onLoad() ,/监听页初次渲染完成onReady() /如果页渲染的很快，那么有可能会在页进动画之前触发,/监听页显，每次页的显都会触发onShowonShow() ,/监听页的隐藏，每次页被隐藏都会触发onHideonHide() ,/监听页卸载onUnload() ,/监听TabBaronTabItemTap()
14、,.应的命周期与页的命周期总体上与程序是相同的3 组件命周期在组件的vue件中:/在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调。beforeCreate() ,/在实例创建完成后被即调。created() ,/挂载上实例之后调mounted() ,/Vue实例销毁后调destroyed() 当组件被使v-if等隐藏之后，组件就会触发destroyed2.4.3 录结构般项的录结构如下：2.4.4 uniCloud1. 概述可以作为前端实现页逻辑的个临时后端数据接集成了阿云以及腾讯云，基于serverless模式和js编程的云开发平
15、台2. uniCloud的价值使js开发前后台整体业务专注于业务敏捷性项不需要前后端分离前端不需要会关系SQL，数据库采NOSQL3. 开发流程4. 构成云函数只需要编写云函数即可对数据库进CRUDuse strict;exports.main = async (event, context) = /event为客户端上传的参数console.log(event : , event)/返回数据给客户端return event;云数据库云数据库采NoSql数据库，前端作者不需要考虑SQL语句的书写 云存储与CDN云存储可以提供存储些图以及件CDN全称Content Delivery Networ
16、k，即内容分发络。其基本思路是尽可能避开互联上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。5. 使在HbuilderX中使:先登陆HbuilderX，没有实名认证的话需要先实名认证创建项时选择使uniCloud，没选择的话右击项=创建uniCloud云开发即可 准备作在cloud件夹上右键，创建云空间创建完毕后，在HbuilderX中关联创建的云空间右击cloud件夹创建云函数进部署使因为项使前后端分离，所以此处不再深究，详细的云函数CRUD编写等见官档：2.4.5 uniapp络请求官原的request：uni.request(url: /仅为例，并真实接地址。da
17、ta: text: uni.request,header: custom-header: hello /定义请求头信息,success: (res) = console.log(res.data); this.text = request success;);uni-ajax2.5 实战项2.5.1 ginblog博客项重点记录1. 使scss样式.添加lang字段然后编译提需要安装scss插件，进安装基本法：2. 使德地图获取定位先去德地图站注册以及实名认证： 进控制台创建的应获取Key下载sdk件将其中的 amap-wx.130.js 件复制到uniapp的common件夹下引SDK以及使import amap from ./amap-wx.130.js export default data() return amapPlugin: null,/德地图插件实例amapKey: 申请的Key,/德地图的Key;,created() /实例化得地图插件this.amapPlugin = new amap.AMapWX(key:this.amapKey); this.amapPlugin.getRegeo(success: function(data)/成功回调console.log(data),fail: function(info)/失败回调console.log(info)