逆战：微信小程序开发（二）

马云家女婿 發表於 2020-2-24 23:04:00

<h1 id="一常用组件">一、常用组件</h1>
<p>在上一个章节中讲解了封装请求数据的模块，在此处请求轮播图的数据</p>
<h2 id="1首页轮播图数据的请求以及渲染">1.首页轮播图数据的请求以及渲染</h2>
<h3 id="11-轮播图数据的请求-pageshomehomejs">1.1 轮播图数据的请求 pages/home/home.js</h3>
<pre><code>import { request } from './../../utils/index.js'
Page({

/**
* 页面的初始数据
*/
data: {
bannerlist: []
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
request('/api/pro/banner').then(data => {
   console.log(data)
   // 微信小程序修改数据的方式
   this.setData({
   bannerlist: data.data
   })
})
},
})
</code></pre>
<h2 id="2-使用组件---视图容器---swiper">2 使用组件 - 视图容器 - swiper</h2>
<p>滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。<br>
属性表如下</p>
<table><thead><tr><th>属性</th> <th>类型</th> <th>默认值</th> <th>必填</th> <th>说明</th> <th>最低版本</th></tr></thead> <tbody><tr><td>indicator-dots</td> <td>boolean</td> <td>false</td> <td>否</td> <td>是否显示面板指示点</td> <td>1.0.0</td></tr> <tr><td>indicator-color</td> <td>color</td> <td>rgba(0, 0, 0, .3)</td> <td>否</td> <td>指示点颜色</td> <td>1.1.0</td></tr> <tr><td>indicator-active-color</td> <td>color</td> <td>#000000</td> <td>否</td> <td>当前选中的指示点颜色</td> <td>1.1.0</td></tr> <tr><td>autoplay</td> <td>boolean</td> <td>false</td> <td>否</td> <td>是否自动切换</td> <td>1.0.0</td></tr> <tr><td>current</td> <td>number</td> <td>0</td> <td>否</td> <td>当前所在滑块的 index</td> <td>1.0.0</td></tr> <tr><td>interval</td> <td>number</td> <td>5000</td> <td>否</td> <td>自动切换时间间隔</td> <td>1.0.0</td></tr> <tr><td>duration</td> <td>number</td> <td>500</td> <td>否</td> <td>滑动动画时长</td> <td>1.0.0</td></tr> <tr><td>circular</td> <td>boolean</td> <td>false</td> <td>否</td> <td>是否采用衔接滑动</td> <td>1.0.0</td></tr> <tr><td>vertical</td> <td>boolean</td> <td>false</td> <td>否</td> <td>滑动方向是否为纵向</td> <td>1.0.0</td></tr> <tr><td>previous-margin</td> <td>string</td> <td>"0px"</td> <td>否</td> <td>前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值</td> <td>1.9.0</td></tr> <tr><td>next-margin</td> <td>string</td> <td>"0px"</td> <td>否</td> <td>后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</td> <td>1.9.0</td></tr> <tr><td>display-multiple-items</td> <td>number</td> <td>1</td> <td>否</td> <td>同时显示的滑块数量</td> <td>1.9.0</td></tr> <tr><td>skip-hidden-item-layout</td> <td>boolean</td> <td>false</td> <td>否</td> <td>是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息</td> <td>1.9.0</td></tr> <tr><td>easing-function</td> <td>string</td> <td>"default"</td> <td>否</td> <td>指定 swiper 切换缓动动画类型</td> <td>2.6.5</td></tr> <tr><td>bindchange</td> <td>eventhandle</td> <td></td> <td>否</td> <td>current 改变时会触发 change 事件，event.detail = {current, source}</td> <td>1.0.0</td></tr> <tr><td>bindtransition</td> <td>eventhandle</td> <td></td> <td>否</td> <td>swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}</td> <td>2.4.3</td></tr> <tr><td>bindanimationfinish</td> <td>eventhandle</td> <td></td> <td>否</td> <td>动画结束时会触发 animationfinish 事件，event.detail 同上</td> <td>1.9.0</td></tr></tbody></table>
<p>在pages/home/home.wxml文件中输入如下代码查看效果</p>
<pre><code>
<swiper
indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}"
duration="{{500}}">
<block wx:for="{{bannerlist}}" wx:key="index">
<swiper-item >
   <image src="{{'http://daxun.kuboy.top' + item}}"></image>
</swiper-item>
</block>
</swiper>
<prolist></prolist>
</code></pre>
<p><img src="https://note.youdao.com/yws/res/1577/C27451F16B544668BE403FFA22412290"></p>
<h1 id="二自定义组件---产品列表">二、自定义组件 - 产品列表</h1>
<h2 id="1自定义组件的布局">1.自定义组件的布局</h2>
<p>components/prolist/prolist.wxml</p>
<pre><code><view class="prolist">
<view class="proitem">
<view class="itemimg">
   <image class="img" src=""></image>
</view>
<view class="iteminfo">
   <view class="title">
   产品名称
   </view>
   <view class="price">
   ￥199
   </view>
</view>
</view>
</view>
</code></pre>
<h2 id="2自定义组件的样式">2.自定义组件的样式</h2>
<p>components/prolist/prolist.wxss</p>
<pre><code>/* components/prolist/prolist.wxss */
.prolist .proitem{
width: 100%;
display: flex;
height: 100px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
}

.prolist .proitem .itemimg{
width: 100px;
height: 100px;
padding: 5px;
}

.prolist .proitem .itemimg .img{
width: 90px;
height: 90px;
box-sizing: border-box;
border: 1px solid #ccc;
}

.prolist .proitem .iteminfo {
padding: 3px;
}

.prolist .proitem .iteminfo .title{
font-size: 18px;
font-weight: bold;
}

.prolist .proitem .iteminfo .price{
font-size: 12px;
}

</code></pre>
<p><img src="https://note.youdao.com/yws/res/1575/90E3B068E85747529CEE6D54D4571951"></p>
<h2 id="3首页请求数据并且传递给子组件">3.首页请求数据，并且传递给子组件</h2>
<p>pages/home/home.js</p>
<pre><code>import { request } from './../../utils/index.js'
Page({

/**
* 页面的初始数据
*/
data: {
prolist: []
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
request('/api/pro').then(data => {
   console.log(data)
   // 微信小程序修改数据的方式
   this.setData({
   prolist: data.data
   })
})
},
})
</code></pre>
<p>pages/home/home.wxml</p>
<pre><code><prolist prolist="{{prolist}}"></prolist>
</code></pre>
<h2 id="4子组件接收数据">4.子组件接收数据</h2>
<p>components/prolist/prolist.js</p>
<pre><code>Component({
/**
* 组件的属性列表
*/
properties: {
prolist: Array
},
})
</code></pre>
<h2 id="5子组件渲染数据">5.子组件渲染数据</h2>
<p>components/prolist/prolist.wxml</p>
<pre><code><view class="prolist">
<view class="proitem" wx:for="{{prolist}}" wx:key="item.proid">
<view class="itemimg">
   <image class="img" src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
   <view class="title">
   {{item.proname}}
   </view>
   <view class="price">
   ￥{{item.price}}
   </view>
</view>
</view>
</view>
</code></pre>
<p><img src="https://note.youdao.com/yws/res/1580/A165B19CB8B24942BB029B10F16916BB"></p>
<h1 id="三实现下拉刷新上拉加载">三、实现下拉刷新上拉加载</h1>
<h2 id="1开启首页的下拉刷新功能">1.开启首页的下拉刷新功能</h2>
<p>pages/home/home.json</p>
<pre><code>{
"usingComponents": {
"prolist": "/components/prolist/prolist"
},
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
}
</code></pre>
<h2 id="2完善相关的下拉刷新函数">2.完善相关的下拉刷新函数</h2>
<p>pages/home/home.js</p>
<pre><code>// pages/home/home.js
import { request } from './../../utils/index.js'
Page({

/**
* 页面的初始数据
*/
data: {
bannerlist: [],
prolist: [],
pageCode: 1 // 页码
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
request('/api/pro/banner').then(data => {
   console.log(data)
   this.setData({
   bannerlist: data.data
   })
})

request('/api/pro').then(data => {
   console.log(data)
   this.setData({
   prolist: data.data
   })
})
},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
request('/api/pro').then(data => {
   console.log(data)
   this.setData({
   prolist: data.data,
   pageCode: 1
   })
})
},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
let num = this.data.pageCode;
let prolist = this.data.prolist
num++;
console.log(num)
request('/api/pro', {
   pageCode: num
}).then(data => {
   // 此处注意临界值的变化 --没有数据
   this.setData({
   prolist: [...prolist, ...data.data],
   pageCode: num
   })
})
}
})
</code></pre>
<p>上拉下拉测试即可</p>
<h1 id="四返回顶部功能实现">四、返回顶部功能实现</h1>
<p>在首页中设置一个固定定位的按钮，然后绑定点击事件，绑定事件使用 bindtap，然后调用小程序提供的api即可返回</p>
<pre><code>// pages/home/home.wxml
<view class="backtop" bindtap="backtop"> ↑ </view>

// pages/home/home.wxss
.backtop {
position: fixed;
bottom: 10px;
right: 8px;
border-radius: 50%;
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.5);
font-size: 18px;
text-align: center;
line-height: 30px;
}

// pages/home/home.js
Page({
/**
* 自定义函数
*/
backtop: function () {
// 小程序api 的界面 - 滚动
wx.pageScrollTo({
   scrollTop: 0,
   duration: 300
})
}
})
</code></pre>
<h1 id="五实现点击商品列表进入产品的详情页面">五、实现点击商品列表进入产品的详情页面</h1>
<h2 id="1构建详情页面">1.构建详情页面</h2>
<p>app.json</p>
<pre><code>"pages": [
"pages/detail/detail"
],
</code></pre>
<h2 id="2声明式导航跳转">2.声明式导航跳转</h2>
<p>使用小程序组件-导航-navigator</p>
<p>页面链接。</p>
<table><thead><tr><th>属性</th> <th>类型</th> <th>默认值</th> <th>必填</th> <th>说明</th> <th>最低版本</th></tr></thead> <tbody><tr><td>target</td> <td>string</td> <td>self</td> <td>否</td> <td>在哪个目标上发生跳转，默认当前小程序</td> <td>2.0.7</td></tr> <tr><td>url</td> <td>string</td> <td></td> <td>否</td> <td>当前小程序内的跳转链接</td> <td>1.0.0</td></tr> <tr><td>open-type</td> <td>string</td> <td>navigate</td> <td>否</td> <td>跳转方式</td> <td>1.0.0</td></tr> <tr><td>delta</td> <td>number</td> <td>1</td> <td>否</td> <td>当 open-type 为 'navigateBack' 时有效，表示回退的层数</td> <td>1.0.0</td></tr> <tr><td>app-id</td> <td>string</td> <td></td> <td>否</td> <td>当<code>target="miniProgram"</code>时有效，要打开的小程序 appId</td> <td>2.0.7</td></tr> <tr><td>path</td> <td>string</td> <td></td> <td>否</td> <td>当<code>target="miniProgram"</code>时有效，打开的页面路径，如果为空则打开首页</td> <td>2.0.7</td></tr> <tr><td>extra-data</td> <td>object</td> <td></td> <td>否</td> <td>当<code>target="miniProgram"</code>时有效，需要传递给目标小程序的数据，目标小程序可在 <code>App.onLaunch()</code>，<code>App.onShow()</code> 中获取到这份数据。详情</td> <td>2.0.7</td></tr> <tr><td>version</td> <td>string</td> <td>release</td> <td>否</td> <td>当<code>target="miniProgram"</code>时有效，要打开的小程序版本</td> <td>2.0.7</td></tr> <tr><td>hover-class</td> <td>string</td> <td>navigator-hover</td> <td>否</td> <td>指定点击时的样式类，当<code>hover-class="none"</code>时，没有点击态效果</td> <td>1.0.0</td></tr> <tr><td>hover-stop-propagation</td> <td>boolean</td> <td>false</td> <td>否</td> <td>指定是否阻止本节点的祖先节点出现点击态</td> <td>1.5.0</td></tr> <tr><td>hover-start-time</td> <td>number</td> <td>50</td> <td>否</td> <td>按住后多久出现点击态，单位毫秒</td> <td>1.0.0</td></tr> <tr><td>hover-stay-time</td> <td>number</td> <td>600</td> <td>否</td> <td>手指松开后点击态保留时间，单位毫秒</td> <td>1.0.0</td></tr> <tr><td>bindsuccess</td> <td>string</td> <td></td> <td>否</td> <td>当<code>target="miniProgram"</code>时有效，跳转小程序成功</td> <td>2.0.7</td></tr> <tr><td>bindfail</td> <td>string</td> <td></td> <td>否</td> <td>当<code>target="miniProgram"</code>时有效，跳转小程序失败</td> <td>2.0.7</td></tr> <tr><td>bindcomplete</td> <td>string</td> <td></td> <td>否</td> <td>当<code>target="miniProgram"</code>时有效，跳转小程序完成</td> <td>2.0.7</td></tr></tbody></table>
<p>open-type 的合法值 -- 在编程式导航中详细讲解</p>
<table><thead><tr><th>值</th> <th>说明</th> <th>最低版本</th></tr></thead> <tbody><tr><td>navigate</td> <td>对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能</td> <td></td></tr> <tr><td>redirect</td> <td>对应 wx.redirectTo 的功能</td> <td></td></tr> <tr><td>switchTab</td> <td>对应 wx.switchTab 的功能</td> <td></td></tr> <tr><td>reLaunch</td> <td>对应 wx.reLaunch 的功能</td> <td>1.1.0</td></tr> <tr><td>navigateBack</td> <td>对应 wx.navigateBack 的功能</td> <td>1.1.0</td></tr> <tr><td>exit</td> <td>退出小程序，<code>target="miniProgram"</code>时生效</td> <td>2.1.0</td></tr></tbody></table>
<pre><code>// components/prolist/prolist.wxml
<view class="prolist">
<navigator url="{{'/pages/detail/detail?proid=' + item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
<view class="proitem" >
   <view class="itemimg">
   <image class="img" src="{{item.proimg}}"></image>
   </view>
   <view class="iteminfo">
   <view class="title">
      {{item.proname}}
   </view>
   <view class="price">
      ￥{{item.price}}
   </view>
   </view>
</view>
</navigator>
</view>
</code></pre>
<h2 id="3详情页面接收数据并且渲染数据">3.详情页面接收数据并且渲染数据</h2>
<pre><code>// pages/detail/detail.js
import { request } from './../../utils/index.js';
Page({

/**
* 页面的初始数据
*/
data: {
proid: '',
proname: '',
proimg: ''
price: 0
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// options为接收的参数
const { proid } = options
request('/api/pro/detail?proid=' + proid).then(data => {
   console.log(data.data)
   const { proid, proname, price, proimg} = data.data
   this.setData({
   proid, proname, price, proimg
   })
})
}
})

// pages/detail/detail.wxml

<image src="{{proimg}}" style="width: 100px;height: 100px;"></image>
<view>{{proname}}</view>
<view>￥{{price}}</view>

</code></pre>
<p><img src="https://note.youdao.com/yws/res/1579/6DEB6663C3374F95858B85631FBF5ACC"></p>
<p>点击不同的产品测试即可</p>
<h2 id="4编程式导航渲染">4.编程式导航渲染</h2>
<p>使用小程序提供的api实现编程式路由的跳转</p>
<p><strong>wx.switchTab(Object object)</strong></p>
<p>跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</p>
<p><strong>wx.reLaunch(Object object)</strong></p>
<p>关闭所有页面，打开到应用内的某个页面</p>
<p><strong>wx.redirectTo(Object object)</strong></p>
<p>关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面</p>
<p><strong>wx.navigateTo(Object object)</strong></p>
<p>保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层</p>
<p><strong>wx.navigateBack(Object object)</strong></p>
<p>关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层</p>
<blockquote>
<p>小程序传递数据使用 data-params形式，可以在事件中根据event获取该参数</p>
</blockquote>
<pre><code>// components/prolist/prolist.wxml
<view class="prolist">
<view class="proitem" bindtap="toDetail" data-proid="{{item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
<view class="itemimg">
   <image class="img" src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
   <view class="title">
   {{item.proname}}
   </view>
   <view class="price">
   ￥{{item.price}}
   </view>
</view>
</view>
</view>

// components/prolist/prolist.js
Component({
/**
* 组件的属性列表
*/
properties: {
prolist: Array
},

/**
* 组件的初始数据
*/
data: {

},

/**
* 组件的方法列表
*/
methods: {
toDetail (event) {
   const { proid } = event.currentTarget.dataset
   wx.navigateTo({
   url: '/pages/detail/detail?proid=' + proid
   })
}
}
})

</code></pre>
<h1 id="六使用第三方组件库">六、使用第三方组件库</h1>
<p>电商平台参考文档（vantweapp）</p>
<p>Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。<br>
<img src="https://note.youdao.com/yws/res/1578/FFBEE40EF722434A92B944D73BDAAE4B"></p>
<h2 id="1安装">1.安装</h2>
<pre><code># 通过 npm 安装
cnpm i @vant/weapp -S --production
</code></pre>
<h2 id="2构建-npm-包">2.构建 npm 包</h2>
<p>打开微信开发者工具，点击工具 -> 构建 npm，并勾选使用 npm 模块选项，构建完成后，即可引入组件</p>
<p><img src="https://note.youdao.com/yws/res/1573/D899BFFA2482470D8C9459CA07A47AF9"><br>
<img src="https://note.youdao.com/yws/res/1574/025EBD3EB73942E19B268164D3E179D7"></p>
<h2 id="3使用组件">3.使用组件</h2>
<p>在 app.json 中去除 "style": "v2"<br>
小程序给新版基础组件强行加上了许多样式，难以去除，不关闭将造成样式混乱。</p>
<h2 id="4商品详情页使用业务组件---goodsaction-商品导航">4.商品详情页使用业务组件 - GoodsAction 商品导航</h2>
<p>参考链接 GoodsAction 商品导航</p>
<pre><code>// pages/detail/detail

{
"usingComponents": {
"van-goods-action": "/miniprogram_npm/@vant/weapp/goods-action/index",
"van-goods-action-icon": "/miniprogram_npm/@vant/weapp/goods-action-icon/index",
"van-goods-action-button": "/miniprogram_npm/@vant/weapp/goods-action-button/index"
}
}
</code></pre>
<p><img src="https://note.youdao.com/yws/res/1576/1819B39D38524B19A6FB302758ABD738"></p>
<br>
<br><br><br><br>
<p><b style="color: rgba(255, 0, 0, 1)">特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢</b></p><br><br>
来源：https://www.cnblogs.com/CGWTQ/p/12356820.html

頁: [1]

琼殿技术论坛's Archiver

逆战：微信小程序开发（二）