uni-app基本使用
<h2 id="uniapp简介">Uniapp简介</h2><ol>
<li>uni-app：是一个使用Vue.js开发前端应用的框架，开发的代码可以发布到H5、Android、iOS以及各种小程序多个平台。</li>
<li>Uniapp约定的开发规范：
<ol>
<li>页面文件遵循Vue单文件组件规范</li>
<li>组件标签靠近小程序规范</li>
<li>接口靠近微信小程序规范</li>
<li>数据绑定及事件处理同<code>Vue.js</code>规范，同时补充了App及页面的生命周期</li>
<li>为了兼容多个平台运行，建议使用flex布局</li>
</ol>
</li>
</ol>
<h2 id="小程序开发的环境搭建">小程序开发的环境搭建</h2>
<ol>
<li>安装编辑器HbuilderX</li>
<li>安装微信开发者工具</li>
</ol>
<h2 id="项目的目录介绍">项目的目录介绍</h2>
<ol>
<li>pages.json：对uni-app进行全局配置，决定页面文件的路径、窗口样式、最顶部的导航栏、底部的tabbar等</li>
<li>manifest.json：应用的配置文件，用于指定应用的名称、图标、权限等</li>
<li>App.vue：根组件，是页面入口文件，可以调用应用的生命周期函数。</li>
<li>main.js：项目入口文件，主要作用是初始化<code>vue</code>实例并使用需要的插件。</li>
<li>uni.scss：为了方便整体控制应用的风格，预置了一批scss变量</li>
<li>unpackage：打包目录，包含各个平台的打包文件</li>
<li>pages：所有的页面存放目录</li>
<li>static：静态资源存放的目录</li>
<li>components：组件存放的目录</li>
</ol>
<h2 id="pagesjson下的常用配置">pages.json下的常用配置</h2>
<h5 id="1全局配置">1.全局配置</h5>
<ol>
<li>在pages.json文件中的globalStyle节点下进行页面的全局配置，作用于每一个小程序页面
<ol>
<li>navigationBarTextStyle：设置导航栏的标题颜色，仅支持black、white</li>
<li>navigationBarTitleText：设置导航栏的标题内容</li>
<li>navigationBarBackgroundColor：设置导航栏的背景色</li>
<li>backgroundColor：设置下拉刷新时窗口的背景色</li>
<li>backgroundTextStyle：设置下拉loading的样式，仅支持dark、light。</li>
<li>enablePullDownRefresh：是否开启下拉刷新</li>
<li>onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位只支持px</li>
</ol>
</li>
<li>pages.json文件中的pages节点进行配置页面，其属性如下：
<ol>
<li>path：指定页面路径</li>
<li>style：设置页面的局部配置，其配置项可以参考globalStyle节点下的属性。</li>
</ol>
</li>
</ol>
<h5 id="2tabbar配置">2.tabBar配置</h5>
<ol>
<li>tabBar分为顶部tabBar和底部tabBar。其属性包含如下：
<ol>
<li>color：tab 上的文字默认颜色</li>
<li>selectedColor：tab上的文字选中时的颜色</li>
<li>backgroundColor：tab的背景色</li>
<li>borderStyle：tabbar 上边框的颜色，仅支持 black/white</li>
<li>list：tab的列表，最少2个、最多5个tab。list节点下的属性有
<ol>
<li>pagePath：在pages中定义的</li>
<li>text：tab上的按钮文字</li>
<li>iconPath：图片路径</li>
<li>selectedIconPath：选中时的图片路径</li>
</ol>
</li>
<li>position：可选值bottom、top。当position值为top时，将不会显示icon。</li>
</ol>
</li>
</ol>
<h5 id="3condition启动模式的配置">3.condition启动模式的配置</h5>
<ol>
<li>在开发期间，为了方便进入非tabBar页面，可以配置启动模式。<mark>类似于在微信开发者工具中添加编译模式的功能</mark></li>
<li>condition节点的属性：
<ol>
<li>current：当前激活的模式，list节点的索引值</li>
<li>list：设置启动模式列表
<ol>
<li>name：启动模式名称</li>
<li>path：启动的页面路径</li>
<li>query：启动参数，可以在页面的生命周期函数onLoad中获取。</li>
</ol>
</li>
</ol>
</li>
</ol>
<pre><code>"condition": {
"current": 0,
"list": [
{
"name": "详情页",
"path": "pages/detail/detail",
"query": "id=1"
}
]
}
// 配置完后，在微信开发者工具中在普通编译器
// 新增了详情页的快速进入方式
</code></pre>
<h2 id="常用组件的基本使用">常用组件的基本使用</h2>
<h5 id="1text组件">1.text组件</h5>
<ol>
<li>text组件等同于HTML中的span标签，属于行内元素。</li>
<li>其常用属性有：
<ol>
<li>selectable：表示文本是否可选。在微信小程序中，该属性调整为user-select</li>
<li>space：显示连续空格</li>
<li>decode：是否解码</li>
</ol>
</li>
</ol>
<h5 id="2view组件">2.view组件</h5>
<ol>
<li>view组件等同于HTML中的div元素，属于块元素</li>
<li>其常用属性有：
<ol>
<li>hover-class：指定按下去的样式类，其默认值为none，表示没有点击效果</li>
<li>hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击的效果，即阻止冒泡</li>
<li>hover-start-time：按住后多久出现点击的效果</li>
<li>hover-stay-time：手指松开后点击的效果保留时间</li>
</ol>
</li>
</ol>
<h5 id="3button组件">3.button组件</h5>
<h5 id="4image组件">4.image组件</h5>
<ol>
<li>image组件，等同于HTML中的img元素</li>
<li>其常用属性：
<ol>
<li>src：指定图片资源地址</li>
<li>mode：指定图片裁剪、缩放的模式</li>
</ol>
</li>
</ol>
<h2 id="uni-app中的样式">uni-app中的样式</h2>
<ol>
<li>rpx：一种根据屏幕宽度自适应的动态单位。不管屏幕多宽，都将其分为750份，即屏幕宽度为750rpx。</li>
<li>使用<code>@import</code>可以导入外联样式表，例如：</li>
</ol>
<pre><code><style>
@import url("./common.css");
</style>
</code></pre>
<ol start="3">
<li>支持常用的选择器，比如类选择器、id选择器、元素选择器；不支持通配符选择器</li>
<li>页面上的page节点相当于HTML文档中的body节点</li>
<li>定义在App.vue中的样式为全局样式，作用于每一个页面。在 pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。</li>
<li>uni-app中可以使用字体图标</li>
<li>使用scss:</li>
</ol>
<pre><code><style lang="scss">
</style>
</code></pre>
<h2 id="uni-app中的数据绑定">uni-app中的数据绑定</h2>
<h5 id="1插值语法的使用">1.插值语法的使用</h5>
<ol>
<li>插值语法：使用一对大花括号</li>
</ol>
<pre><code><view>
<text>{{msg}}</text>
<view></view>
<text>{{flag === true ? '真' : '假'}}</text>
<view></view>
<text>{{100 + 150}}</text>
</view>
</code></pre>
<h5 id="2v-bind动态绑定属性">2.v-bind动态绑定属性</h5>
<ol>
<li><code>v-bind:属性名称</code>指令可以简写为<code>:属性名称</code></li>
</ol>
<pre><code><image v-bind:src="imgUrl"></image>
<image :src="imgUrl"></image>
</code></pre>
<h2 id="uni-app中的列表渲染">uni-app中的列表渲染</h2>
<ol>
<li>列表渲染使用vue中的v-for指令。</li>
</ol>
<pre><code><view v-for="(item, index) in userList" :key="item.id">
<text>{{item.name}}</text>
</view>
</code></pre>
<h2 id="uni-app中的事件">uni-app中的事件</h2>
<ol>
<li>事件绑定：通过v-on进行事件的绑定，可以简写成@。例如绑定点击事件，则应该写为<code><button @click="handleClick"></button></code></li>
<li>事件传参
<ol>
<li>如果未显示传递参数，则事件的回调函数中的第一个形参就为事件对象</li>
</ol>
<pre><code><button @click="handleClick">点击事件, 事件的回调函数中包含默认形参事件对象</button>
handleClick(e) {
console.log(e)
}
</code></pre>
<ol start="2">
<li>如果显示的传递了参数，对应的事件函数形参接收的则是传递过来的实参</li>
</ol>
<pre><code><button @click="handleClick(imgUrl)">点击事件, 传递数据</button>
handleClick(imgUrl) {
console.log(imgUrl)
}
</code></pre>
<ol start="3">
<li>事件回调函数中即获取事件对象，也获取传递的实参数据</li>
</ol>
<pre><code><button @click="handleClick(imgUrl, $event)">点击事件, 传递数据</button>
handleClick(imgUrl, e) {
console.log(imgUrl, e)
}
</code></pre>
</li>
</ol>
<h2 id="uni-app中的生命周期函数">uni-app中的生命周期函数</h2>
<h5 id="1应用的生命周期函数">1.应用的生命周期函数</h5>
<ol>
<li>onLaunch：当<code>uni-app</code>初始化完成时触发（全局只触发一次）</li>
<li>onShow：当<code>uni-app</code>启动，或从后台进入前台显示</li>
<li>onHide：当 <code>uni-app</code> 从前台进入后台</li>
<li>onError：当 <code>uni-app</code> 报错时触发</li>
</ol>
<h5 id="2页面的生命周期函数">2.页面的生命周期函数</h5>
<ol>
<li>onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为Object，可以用于页面传参</li>
<li>onShow：监听页面显示。</li>
<li>onReady：监听页面初次渲染完成。</li>
<li>onHide：监听页面隐藏</li>
<li>onUnload：监听页面卸载</li>
</ol>
<h2 id="下拉刷新">下拉刷新</h2>
<h5 id="1启动下拉刷新">1.启动下拉刷新</h5>
<ol>
<li>在pages.json文件中的pages节点下的style属性中，使用enablePullDownRefresh属性开启下拉刷新。</li>
</ol>
<pre><code>"enablePullDownRefresh": true
</code></pre>
<ol start="2">
<li>调用<code>uni.startPullDownRefresh</code>方法开启下拉刷新</li>
</ol>
<h5 id="2监听下拉刷新">2.监听下拉刷新</h5>
<ol>
<li>在页面的onPullDownRefresh函数中进行监听。</li>
</ol>
<pre><code>onPullDownRefresh() {
console.log("用户下拉刷新了")
},
</code></pre>
<h5 id="3下拉刷新的关闭">3.下拉刷新的关闭</h5>
<ol>
<li>使用<code>uni.stopPullDownRefresh()</code>停止当前页面下拉刷新</li>
</ol>
<h2 id="上拉加载">上拉加载</h2>
<ol>
<li>在pages.json文件中的pages节点下的style属性中，使用onReachBottomDistance属性设置距离底部加载的距离，默认为50px</li>
<li>在页面的onReachBottom函数监听触底的行为</li>
</ol>
<h2 id="网络请求的发送">网络请求的发送</h2>
<ol>
<li>在uni-app中使用<code>uni.request</code>方法进行网络请求的发送。<mark>在小程序中网络相关的API在使用前需要配置域名白名单。</mark></li>
<li>get请求的发送示例</li>
</ol>
<pre><code>uni.request({
url:"https://www.escook.cn/api/get",
method:"GET",
data: {
name: 'zs',
age: 24
},
success(res) {
console.log(res)
}
})
</code></pre>
<ol start="3">
<li>post请求的发送示例</li>
</ol>
<pre><code>uni.request({
url: "https://www.escook.cn/api/post",
data: {
name: 'zs',
age: 23
},
success(res) {
console.log(res)
},
method:"POST"
})
</code></pre>
<h2 id="数据缓存">数据缓存</h2>
<ol>
<li><code>uni.setStorage</code>：将数据存储在本地存储的指定key中，会覆盖掉原来该key对应的内容。这是一个异步接口</li>
<li><code>uni.setStorageSync</code>：将data存储在本地缓存中指定的 key 中，会覆盖掉原来该key对应的内容，这是一个同步接口</li>
<li><code>uni.getStorage</code>：从本地缓存中异步获取指定 key 对应的内容。</li>
<li><code>uni.getStorageSync</code>：从本地缓存中同步获取指定 key 对应的内容</li>
<li><code>uni.removeStorage</code>：从本地缓存中异步移除指定 key</li>
<li><code>uni.removeStorageSync</code>：从本地缓存中同步移除指定 key。</li>
</ol>
<h2 id="上传图片">上传图片</h2>
<ol>
<li>使用<code>uni.chooseImage</code>方法从本地相册选择图片或使用相机拍照。</li>
<li>示例</li>
</ol>
<pre><code><button @click="chooseImgs">上传图片</button>
chooseImgs() {
uni.chooseImage({
count:5,
success: (res) => {
this.imgPath = res.tempFilePaths
console.log(res)
}
})
},
</code></pre>
<h2 id="预览图片">预览图片</h2>
<ol>
<li>预览图片使用<code>uni.previewImage</code>方法</li>
<li>示例</li>
</ol>
<pre><code><view >
<image :src='item' v-for="(item, index) in imgPath" :key="index" @click="previewImg(item)"></image>
</view>
chooseImgs() {
uni.chooseImage({
count:5,
success: (res) => {
this.imgPath = res.tempFilePaths
console.log(res)
}
})
}
</code></pre>
<h2 id="条件注释实现多端兼容">条件注释实现多端兼容</h2>
<ol>
<li>条件注释的语法：<code>以#ifdef 平台标识开头，以#endif结尾</code></li>
<li>组件的条件注释</li>
</ol>
<pre><code><!-- #ifdef H5 -->
<view>H5中层现的内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信中层现的内容</view>
<!-- #endif -->
</code></pre>
<ol start="3">
<li>api的条件注释</li>
</ol>
<pre><code>test() {
// #ifdef H5
console.log("H5中层现的内容")
// #endif
// #ifdef MP-WEIXIN
console.log("微信中层现的内容")
// #endif
}
</code></pre>
<ol start="4">
<li>样式的条件注释</li>
</ol>
<pre><code>.container {
/* #ifdef H5 */
background-color: aqua;
/* #endif */
/* #ifdef MP-WEIXIN */
background-color: brown;
/* #endif */
}
</code></pre>
<h2 id="uni-app中的导航跳转">uni-app中的导航跳转</h2>
<h5 id="1声明式导航">1.声明式导航</h5>
<ol>
<li>使用navigator组件</li>
<li>跳转到普通页面(非tabBar页面)示例</li>
</ol>
<pre><code><navigator open-type="navigate" url="/pages/detail/detail">跳转到普通页面</navigator>
</code></pre>
<ol start="3">
<li>跳转到tabBar页面</li>
</ol>
<pre><code><navigator open-type="switchTab" url="/pages/message/message">跳转到tabBar页面</navigator>
</code></pre>
<h5 id="2编程式导航">2.编程式导航</h5>
<ol>
<li>使用<code>navigateTo</code>方法进行跳转：将会保留当前页面，跳转到应用内的某个页面，从而使用<code>uni.navigateBack</code>可以返回到原页面。</li>
<li>使用<code>switchTab</code>方法进行跳转，跳转到tabbar页面</li>
<li>使用<code>redirectTo</code>方法进行跳转，关闭当前页面，跳转到应用内的某个页面。</li>
</ol>
<h5 id="3导航跳转传递参数">3.导航跳转传递参数</h5>
<ol>
<li>在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期函数进行接收，该生命周期函数的options形参存放着其他地方传递过来的参数</li>
<li>示例：</li>
</ol>
<pre><code>goToDetail() {
uni.navigateTo({
url:`/pages/detail/detail?id=1&name=zs`
})
}
onLoad(options) {
console.log(options.id, options.name)
}
</code></pre>
<h2 id="组件">组件</h2>
<h5 id="1组件的创建">1.组件的创建</h5>
<ol>
<li>在项目根目录下新建components目录，在components目录下新建xxx.vue即完成一个组件的创建</li>
<li>组件的注册和使用和vue是一样的</li>
</ol>
<h5 id="2组件的生命周期">2.组件的生命周期</h5>
<ol>
<li>组件的生命周期和vue中是一样的</li>
</ol>
<h5 id="3组件的通信方式">3.组件的通信方式</h5>
<ol>
<li>父组件给子组件传值：在子组件内部使用props接收父组件传递的数据</li>
</ol>
<pre><code><!--父组件中-->
<login :msg='name'></login>
<!--子组件中-->
props:['msg']
</code></pre>
<ol start="2">
<li>子组件给父组件传值：子组件通过$emit触发事件进行传递参数，父组件定义自定义事件(监听事件)并接收参数</li>
</ol>
<pre><code><!--子组件中-->
<button @click="passValue">给父组件传值</button>
methods: {
passValue() {
this.$emit('update', this.msg + ',Good')
}
}
// 父组件中监听事件
<login :msg='name' @update='updateMsg'></login>
methods: {
updateMsg(res) {
console.log(res)
this.msg = res
}
}
</code></pre>
<ol start="3">
<li>兄弟组件之间通信：uni.$on注册一个全局监听事件，通过uni.$emit触发全局监听事件</li>
</ol>
<h2 id="打包">打包</h2>
<h5 id="1微信小程序打包">1.微信小程序打包</h5>
<ol>
<li>在manifest.json文件中进行微信小程序配置</li>
<li>修改请求服务端的地址为线上合法地址</li>
<li>在小程序后台配置request合法域名</li>
</ol>
<h5 id="2安卓打包">2.安卓打包</h5>
<ol>
<li>在manifest.json文件中进行H5配置</li>
</ol>
<h5 id="3ios打包">3.IOS打包</h5>
<ol>
<li>在manifest.json文件中进行基础配置等</li>
</ol><br><br>
来源：https://www.cnblogs.com/xiaocer/p/17004630.html
頁:
[1]