uniapp‘急‘速入门

大家好,我是龙骑士,现在企业招聘都要求小程序开发,今天给大家讲解一下uniapp'急'速入门

如果大家学习过vue,那么学习uni-app就会非常容易.一个微信小程序的项目结构和文件类型如下:

• components 组件库
• pages页面,pages.json就是路由配置页面
• static 静态文件存放位置,通常是图片
• unpackage 打包文件路径 dist
• main.js项目文件入口,可以用于定义全局变量
• mainfest.json 项目配置文件

                基础配置(应用标志,应用名称,应用描述,应用版本号)

                App图标配置:1024*1024(IOS)

                App启动配置:启动界面选项

                App SDK配置:第三方应用程序

                App模块配置权限配置:

                H5配置:

                微信小程序配置:AppID(微信公众平台申请)

                全局标题与页面标题

                全局样式与页面样式

                App生命周期

• onLanch uniapp初始化完成时出发(全局只出发一次)
• on Show uniapp启动 ,或者从前台进入后台
• onHide uniapp从前台进入后台
• onUniNViewMessage 对vue页面发送的数据监听              

                页面的生命周期

•   onload 监听页面加载,其参数为上个页面传递的数据,参数类型为object
• onshow 监听页面显示
• onready监听页面初次渲染完成
• onHide 监听页面隐藏
• onUnload 监听页面卸载
• onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新
• onReachButton 页面上拉触底时间的处理函数
• onShareAppMessage用户点击右上角分享
• onNavigationBarButton Tap监听原生标题按钮点击时间,参数为Object
• onBackPress监听页面返回 

CSS样式

        rpx 可以根据屏幕宽度进行自适应,规定屏幕宽度为750px

        upx基准宽度的单位

        数据绑定与事件

• v-bind组件的属性名  缩写:

事件:用户与App发生的交互动作

<template>
<view>
    <input>
    class="green"
    tyepe="text"
    @blur="blur"
    @iput="/change"
    @focus="/focus"
    @confirm="confirm"
    @tap="tap"
    @click="click"
    @longpress="longpress"
    @touchstart="touchstart"
    @touchmove="touchmove"
    @touchend="touchend"
    @touchcancel="touchcancel"
</view>
</template>

• ### 条件渲染
  -        v-if
  -        v-show
  -        v-else-if  v-else
• ### 列表渲染
  -         数组
  -         对象
  -         数组对象
• v-for :key="item.id"用于数组循环
• flex布局 属性:flex-direction设置元素的排列方向,值:row,row-reverse,column,column-reverse
  flex-wrap:使容器内元素换行,nowwrap不换行,wrap-reverse
  justify-content:flex-start/flex-end/center/space-between/space-around
  align-items:stretch/flex-start/flex-end/center/baseline//设置元素在交叉轴上的对齐方式
  flex-grow/flex-shrink设置元素放大缩小比例,flex-basis设置元素固定或者自动空间占比,align-self重写父类align-items属性