uni-app小白入门自学笔记（二）

葱哥發表於 2021-2-22 13:12:00

<h3 id="码文不易啊转载请带上本文链接呀感谢感谢-httpswwwcnblogscomechoyyap14429616html">码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14429616.html</h3>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14429616.html</li><li>uni的生命周期<ul><li>应用生命周期</li><li>页面生命周期</li></ul></li><li>导航跳转和传参<ul><li>声明式导航：navigator</li><li>编程式导航：<ul><li>uni.navigateTo(obj)</li><li>uni.redirectTo(obj)</li><li>uni.switchTab(obj)</li></ul></li><li>获取参数</li></ul></li><li>创建组件，组件通讯</li><li>下拉刷新 onPullDownRefresh<ul><li>开启下拉刷新的两种方式：</li><li>监听下拉刷新</li><li>关闭下拉刷新</li></ul></li><li>上拉加载 (页面触底加载)<ul><li>监听页面触底</li></ul></li><li>数据缓存 (操作storage)<ul><li>同步（推荐）</li><li>异步</li></ul></li><li>上传、预览图片</li><li>前情提要：uni-app小白入门自学笔记（一）</li></ul></div><p></p>
<h3 id="uni的生命周期">uni的生命周期</h3>
<h4 id="应用生命周期">应用生命周期</h4>
<ul>
<li>
<p>生命周期的概念：一个对象从创建，运行，销毁的整个过程被称为生命周期</p>
</li>
<li>
<p>生命周期函数：在生命周期中每个阶段会触发一个函数，这些函数被称为生命周期函数</p>
</li>
<li>
<p>应用生命周期仅可在<code>App.vue</code>中监听，在其它页面监听无效。</p>
</li>
</ul>
<p><code>uni-app</code> 支持如下应用生命周期函数：</p>
<table>
<thead>
<tr>
<th style="text-align: left">函数名</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">onLaunch</td>
<td style="text-align: left">当<code>uni-app</code> 初始化完成时触发（全局只触发一次）</td>
</tr>
<tr>
<td style="text-align: left">onShow</td>
<td style="text-align: left">当 <code>uni-app</code> 启动，或从后台进入前台显示</td>
</tr>
<tr>
<td style="text-align: left">onHide</td>
<td style="text-align: left">当 <code>uni-app</code> 从前台进入后台</td>
</tr>
<tr>
<td style="text-align: left">onError</td>
<td style="text-align: left">当 <code>uni-app</code> 报错时触发</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><script>
// 只能在App.vue里监听应用的生命周期
export default {
   onLaunch: function() {
         console.log('App Launch')
   },
   onShow: function() {
         console.log('App Show')
   },
   onHide: function() {
         console.log('App Hide')
      },
   onError: function(err) {
         console.log(err)
   }
}
</script>
</code></pre>
<h4 id="页面生命周期">页面生命周期</h4>
<p><code>uni-app</code> 常用的页面生命周期函数：</p>
<table>
<thead>
<tr>
<th style="text-align: left">函数名</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">onLoad</td>
<td style="text-align: left">监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）</td>
</tr>
<tr>
<td style="text-align: left">onShow</td>
<td style="text-align: left">监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td>
</tr>
<tr>
<td style="text-align: left">onReady</td>
<td style="text-align: left">监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发</td>
</tr>
<tr>
<td style="text-align: left">onHide</td>
<td style="text-align: left">监听页面隐藏</td>
</tr>
<tr>
<td style="text-align: left">onUnload</td>
<td style="text-align: left">监听页面卸载</td>
</tr>
</tbody>
</table>
<pre><code><script>
export default {
   onLoad: function(option) {
         console.log('页面加载',option)
   },
   onShow: function() {
         console.log('页面显示')
   },
   onReady: function() {
         console.log('页面初次渲染')
      },
   onHide: function() {
         console.log('页面隐藏')
   }
}
</script>
</code></pre>
<h3 id="导航跳转和传参">导航跳转和传参</h3>
<h4 id="声明式导航navigator">声明式导航：navigator</h4>
<p>该组件类似HTML中的<code><a></code>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。</p>
<p>常用属性：</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性名</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">url</td>
<td style="text-align: left">应用内的跳转链接，值为相对或绝对路径，不需要加 <code>.vue</code> 后缀</td>
</tr>
<tr>
<td style="text-align: left">open-type</td>
<td style="text-align: left">跳转方式默认值：navigate，而跳转tabbar页面时，需设置为switchTab</td>
</tr>
</tbody>
</table>
<pre><code class="language-html"><template>
<view class="">

<navigator url="/pages/detail/detail?id=80">跳转详情</navigator>


<navigator url="/pages/us/us" open-type="switchTab">关于我们</navigator>
</view>
</template>
</code></pre>
<h4 id="编程式导航">编程式导航：</h4>
<h5 id="uninavigatetoobj">uni.navigateTo(obj)</h5>
<p>保留当前页面，跳转到应用内的某个页面，使用<code>uni.navigateBack</code>可以返回到原页面。</p>
<p><strong>obj必传参数说明</strong>：<code>url</code>,需要跳转的应用内<code>非 tabBar </code>的页面的相对或绝对路径，路径后可以带参数，下一个页面的<code>onLoad函数</code>可得到传递的参数</p>
<p><strong>跳转到 tabBar 页面只能使用 switchTab 跳转</strong></p>
<pre><code>//在跳转到detail.vue页面并传递参数
uni.navigateTo({
url: '../detail/detail?id=1&name=Echoyya'
});
</code></pre>
<h5 id="uniredirecttoobj">uni.redirectTo(obj)</h5>
<p>关闭当前页面，跳转到应用内的某个页面。</p>
<p><strong>obj必传参数说明</strong>：<code>url</code>,需要跳转的应用内<code>非 tabBar </code>的页面的相对或绝对路径，路径后可以带参数，下一个页面的<code>onLoad函数</code>可得到传递的参数</p>
<pre><code>uni.redirectTo({
url: '../detail/detail?id=1'
});
</code></pre>
<h5 id="uniswitchtabobj">uni.switchTab(obj)</h5>
<p><strong>跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。</strong></p>
<p>但如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 <code>onHide</code></p>
<p><strong>obj必传参数说明</strong>：<code>url</code>,需要跳转的<code>tabBar</code>的页面的相对或绝对路径，（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数</p>
<p><strong>pages.json</strong></p>
<pre><code>"tabBar":{
"color":"#8a8a8a",
"selectedColor":"#d81e06",
"list":[
{
   "text":"首页",
   "pagePath": "pages/index/index",
   "iconPath":"static/tabs/home.png",
   "selectedIconPath":"static/tabs/home-active.png"
},
{
   "text":"我们",
   "pagePath": "pages/us/us",
   "iconPath":"static/tabs/us.png",
   "selectedIconPath":"static/tabs/us-active.png"
}
]
}
</code></pre>
<p><strong>index.vue</strong></p>
<pre><code>uni.switchTab({
url: '/pages/us/us'
});
</code></pre>
<h4 id="获取参数">获取参数</h4>
<p>导航跳转传参，在目标页面<code>onLoad</code>生命周期中，可以接受一个参数options，即为传递的参数</p>
<p><strong>detail.vue</strong></p>
<pre><code>onLoad(options) {
console.log(options.id)// 80
}
</code></pre>
<h3 id="创建组件组件通讯">创建组件，组件通讯</h3>
<p>首先在uni-app中，创建组件的方法与Vue中一模一样，<strong>新建组件 -> import引入 -> components中声明</strong>，相信大家对Vue都比较熟悉，此处不再赘述，主要简述一下组件间的通讯，与Vue中略有不同，</p>
<ul>
<li>
<p>父向子，子向父同Vue，可参考我之前总结过的一篇博文有非常详细的描述及案例Vue2.0 多种组件传值方法-不过如此的 Vuex</p>
</li>
<li>
<p>兄弟组件传值，与Vue略有不同</p>
<p>uni.$emit(eventName,obj)：触发全局的自定义事件，附加参数都会传给监听器回调函数。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>eventName</td>
<td>String</td>
<td>事件名</td>
</tr>
<tr>
<td>OBJECT</td>
<td>Object</td>
<td>触发事件携带的附加参数</td>
</tr>
</tbody>
</table>
<p>uni.$on(eventName,callback)：监听全局的自定义事件，事件由 <code>uni.$emit</code> 触发，回调函数会接收事件触发函数的传入参数。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>eventName</td>
<td>String</td>
<td>事件名</td>
</tr>
<tr>
<td>callback</td>
<td>Function</td>
<td>事件的回调函数</td>
</tr>
</tbody>
</table>
</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1238759/202102/1238759-20210222131130734-1969665020.gif" alt="" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1238759/202102/1238759-20210222131111850-1213010047.png" alt="" loading="lazy"></p>
<h3 id="下拉刷新-onpulldownrefresh">下拉刷新 onPullDownRefresh</h3>
<h4 id="开启下拉刷新的两种方式">开启下拉刷新的两种方式：</h4>
<ol>
<li>需要在 <code>pages.json</code> 里，找到的当前页面的pages节点，并在 <code>style</code> 选项中开启 <code>enablePullDownRefresh</code>。</li>
</ol>
<pre><code>{
"pages": [
   {
         "path": "pages/index/index",
         "style": {
            "enablePullDownRefresh": true
         }
   }
]
}
</code></pre>
<ol start="2">
<li><code>uni.startPullDownRefresh(obj)</code>方法，触发该方法从而实现下拉刷新，效果与用户手动下拉刷新一致。参数可接受回调函数</li>
</ol>
<pre><code class="language-javascript">// 仅做示例，实际开发中延时根据需求来使用。
export default {
onLoad: function (options) {
   uni.startPullDownRefresh();
},
}
</code></pre>
<h4 id="监听下拉刷新">监听下拉刷新</h4>
<p>在 JS 中定义 <code>onPullDownRefresh</code> 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。</p>
<pre><code>export default {
onPullDownRefresh() {
   console.log('监听下拉刷新');
}
}
</code></pre>
<h4 id="关闭下拉刷新">关闭下拉刷新</h4>
<p>处理完数据刷新后，<code>uni.stopPullDownRefresh</code> 可以停止当前页面的下拉刷新。</p>
<pre><code>export default {
onPullDownRefresh() {
   console.log('监听下拉刷新');
   setTimeout(()=>{
         uni.stopPullDownRefresh()
   }, 1000)
}
}
</code></pre>
<h3 id="上拉加载-页面触底加载">上拉加载 (页面触底加载)</h3>
<h4 id="监听页面触底">监听页面触底</h4>
<ol>
<li>在 JS 中定义 <code>onReachBottom</code>处理函数（和onLoad等生命周期函数同级），监听该页面上拉触底事件。常用于触底加载下一页数据</li>
</ol>
<pre><code> <template>
<view>
      <view class="box3" v-for="(item,index) in listNum" :key="index">
      {{item}}
      </view>
</view>
</template>

<script>
   export default {
      data() {
      return {
         listNum:10
      }
      },
      onReachBottom(){
         console.log('页面触底');
         this.listNum +=5
      }
   }
</script>

<style>
.box{
   height: 100px;
   line-height: 100px;
   text-align: center;
}
</style>
</code></pre>
<ol start="2">
<li>
<p>需要在 <code>pages.json</code> 里，找到的当前页面的pages节点，并在 <code>style</code> 选项中开启 <code>onReachBottomDistance</code>。页面上拉触底事件触发时距页面底部距离（Number类型）</p>
<ul>
<li>也可设置<code>globalStyle</code>下的触底距离，若同时设置，page节点下的style会覆盖全局配置</li>
</ul>
</li>
</ol>
<pre><code>{
"pages": [
{
   "path": "pages/index/index",
   "style": {
      "onReachBottomDistance": 200
   }
}
],
"globalStyle": { // 全局配置
"navigationBarTextStyle": "white",
"navigationBarTitleText": "hello-uni-app",
"navigationBarBackgroundColor": "#8470FF",
"backgroundColor": "#8DEEEE",

"onReachBottomDistance": 200
}
}
</code></pre>
<h3 id="数据缓存-操作storage">数据缓存 (操作storage)</h3>
<h4 id="同步推荐">同步（推荐）</h4>
<ul>
<li>
<p><code>uni.setStorageSync(key,data)</code></p>
</li>
<li>
<p><code>uni.getStorageSync(key)</code></p>
</li>
<li>
<p><code>uni.removeStorageSync(key)</code></p>
</li>
</ul>
<pre><code><template>
<view class="">
<button type="primary" @click="setStorageSync">同步存储数据</button>
<button type="primary" @click="getStorageSync">同步获取数据</button>
<button type="primary" @click="removeStorageSync">同步移除数据</button>
</view>
</template>

<script>
export default {
methods: {
   setStorageSync() {
   uni.setStorageSync('name', 'Echoyya');
   },
   getStorageSync() {
   console.log(uni.getStorageSync('name'))
   },
   removeStorageSync() {
   uni.removeStorageSync('name')
   }
}
}
</script>
</code></pre>
<h4 id="异步">异步</h4>
<ul>
<li>
<p><code>uni.setStorage(obj)</code>：包括存储的key，data，以及成功失败的回调函数</p>
</li>
<li>
<p><code>uni.getStorage(obj)</code>：包括存储的key，以及成功失败的回调函数</p>
</li>
<li>
<p><code>uni.removeStorage(obj)</code>：包括存储的key，以及成功失败的回调函数</p>
</li>
</ul>
<pre><code><template>
<view class="">
<button type="warn" @click="setStorage">异步存储数据</button>
<button type="warn" @click="getStorage">异步获取数据</button>
<button type="warn" @click="removeStorage">异步移除数据</button>
</view>
</template>

<script>
export default {
methods: {
   setStorage() {
   uni.setStorage({
      key: 'name',
      data: 'Echoyya',
      success: function() {
         console.log('存储成功');
      }
   })
   },
   getStorage() {
   uni.getStorage({
      key: 'name',
      success: function(res) {
         console.log(res.data);
      }
   })
   },
   removeStorage() {
   uni.removeStorage({
      key: 'name',
      success: function(res) {
         console.log('移除成功');
      }
   })
   },
}
}
</script>
</code></pre>
<h3 id="上传预览图片">上传、预览图片</h3>
<p>图片操作，常用到以下两个方法：</p>
<ul>
<li><code>uni.chooseImage(obj)</code>：上传图片，从本地相册选择图片或使用相机拍照。</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">count</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">最多可以选择的图片张数，默认9</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">必填项，成功则返回图片的本地文件路径列表<code> tempFilePaths</code></td>
</tr>
</tbody>
</table>
<ul>
<li><code>uni.previewImage(obj)</code>：预览图片</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">current</td>
<td style="text-align: left">String/Number</td>
<td style="text-align: left">为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。有些app版本为必填</td>
</tr>
<tr>
<td style="text-align: left">urls</td>
<td style="text-align: left">Array<string></string></td>
<td style="text-align: left">必填项，需要预览的图片链接列表</td>
</tr>
</tbody>
</table>
<pre><code><template>
<view class="">
<button type="default" @click="chooseImage">图片上传</button>

<image v-for="(item,index) in imgArr" :key="index" :src="item" @click="previewImage(item)"></image>
</view>
</template>

<script>
export default {
data() {
   return {
   imgArr: []
   }
},
methods: {
   chooseImage() {
   uni.chooseImage({
      count: 5,
      success: (res) => {
         this.imgArr = res.tempFilePaths
      }
   })
   },
   previewImage(current) {
   uni.previewImage({
      current,
      urls: this.imgArr
   })
   }
}
}
</script>
</code></pre>
<h3 id="前情提要uni-app小白入门自学笔记一">前情提要：uni-app小白入门自学笔记（一）</h3><br><br>
来源：https://www.cnblogs.com/echoyya/p/14429616.html

頁: [1]

琼殿技术论坛's Archiver

uni-app小白入门自学笔记（二）