1、在手机 *** 作界面找到微信,如下图箭头所示,点击打开。
/iknow-pic.cdn.bcebos.com/ac345982b2b7d0a28bf2edc7c6ef76094b369ab5"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/ac345982b2b7d0a28bf2edc7c6ef76094b369ab5?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/ac345982b2b7d0a28bf2edc7c6ef76094b369ab5"/>
2、在微信界面找到发现点击打开,如下图所示。
/iknow-pic.cdn.bcebos.com/eac4b74543a98226d9cac27d8782b9014a90eb65"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/eac4b74543a98226d9cac27d8782b9014a90eb65?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/eac4b74543a98226d9cac27d8782b9014a90eb65"/>
3、在打开发现后,在最下面可以看到小程序,如下图所示。
/iknow-pic.cdn.bcebos.com/fcfaaf51f3deb48f26984f84fd1f3a292cf578f3"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/fcfaaf51f3deb48f26984f84fd1f3a292cf578f3?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/fcfaaf51f3deb48f26984f84fd1f3a292cf578f3"/>
4、在小程序里可以看到更多的小程序,如下图红色方框所示。
/iknow-pic.cdn.bcebos.com/83025aafa40f4bfbf11a700e0e4f78f0f63618a5"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/83025aafa40f4bfbf11a700e0e4f78f0f63618a5?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/83025aafa40f4bfbf11a700e0e4f78f0f63618a5"/>
5、还有在微信主界面最上端向下滑动,箭头所示,可以直接找到小程序的。
/iknow-pic.cdn.bcebos.com/060828381f30e92489f0746b41086e061d95f710"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/060828381f30e92489f0746b41086e061d95f710?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/060828381f30e92489f0746b41086e061d95f710"/>
<!--pages/search/search.wxml-->
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
show-action
input-align="center"
bind:search="onSearch"
bind:cancel="onCancel"
bind:change="onChange"
background="#4fc08d"
/>
<ListItem itemList="{{itemList}}" />
<view wx:if="{{kong}}" style="padding: 20pxtext-align: center">无更多数据</view>
<van-toast id="van-toast" />
{
"usingComponents": {
"van-search": "@vant/weapp/search/index",
"ListItem":"/components/ListItem/ListItem",
"van-toast": "@vant/weapp/toast/index"
},
"navigationBarTitleText": "搜索",
"enablePullDownRefresh": true,
"onReachBottomDistance": 0
}
const { goodsHttp } = require('../../http/api')
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast.js'
Page({
data: {
value: '',
itemList:[],
page:1,
kong:false,
isloding:true
},
onLoad(){
this.init()
if(this.data.isloding)return this.init()
},
async init(){
try{
this.setData({
isloding:false
})
wx.showLoading({
title: '别急哦~',
})
let {goods:{data}} = await goodsHttp({title:this.data.value,
page:this.data.page})
data.forEach(r=>r.description='书籍是人类进步的电梯书籍是人类进步的电梯书籍是人类进步的电梯')
if(this.data.page==1){
this.data.itemList = []
}
this.setData({itemList:[...this.data.itemList,...data]})
if(!data.length){
this.setData({
kong:true
})
}
else{
this.setData({
kong:false
})
}
Toast.clear()
wx.hideLoading()
this.setData({
isloding:true
})
}catch(err){
console.log(err)
}
},
onReachBottom(){
this.data.page++
this.init()
},
onChange(e) {
this.setData({
value: e.detail,
})
},
onSearch() {
this.data.page = 1
this.init(this.data.value)
console.log('搜索' + this.data.value)
},
onCancel() {
/* encodeURIComponent('微信小程序') 转码
decodeURIComponent("%E4%BD%A0%E6%98%AF%E5%82%BB%E9%80%BC") 解码
*/
this.data.value = ''
this.init()
this.data.page = 1
console.log('取消' + this.data.value)
},
onPullDownRefresh: function () {
this.data.page=1
this.init()
},
})
<!--components/ListItem/ListItem.wxml-->
<block wx:for="{{itemList}}" wx:key="index">
<view class="flex item" bindtap="go" data-url="{{item.cover_url}}">
<image class="img1" src="{{item.cover_url}}"></image>
<view class="row">
<view class="title">
{{item.title}}
</view>
<view class="dec {{item.price?'van-multi-ellipsis--l2':'van-multi-ellipsis--l3'}}">
{{item.description}}
</view>
<view class="common-sty" wx:if="{{item.price}}">
<text>价格:{{item.price}}</text>
<text>销量:{{item.sales}}</text>
<text>收藏人数:{{item.collects_count}}</text>
</view>
</view>
</view>
</block>
/* components/ListItem/ListItem.wxss */
/* @import '@vant/weapp/common/index.wxss' */
@import '/miniprogram_npm/@vant/weapp/common/index.wxss'
.flex{
display: flex
}
.item{
padding:5px
}
.img1{
width: 120px
height: 120px
display: block
border-radius: 5px
}
.row{
flex:1
height: 120px
}
.title{
padding:10px
text-overflow: ellipsis
display: -webkit-box
-webkit-line-clamp: 1
word-break: break-all
-webkit-box-orient: vertical
height:14px
overflow: hidden
}
.dec{
padding: 0 10px
margin-top: 10px
}
.common-sty{
font-size: 12px
padding:10px
color:rgb(66, 64, 64)
}
.common-sty text{
margin-right: 10px
}
{
"component": true,
"usingComponents": {}
}
// components/ListItem/ListItem.js
Component({
/**
* 组件的属性列表
*/
properties: {
itemList:{
type:Array,
value:[{
cover_url:"https://oss.shop.eduwork.cn/product/2020-0820-5f3e15bc69891.png",
title:"人类的书籍",
description:"人类进步的阶梯人类进步的阶梯"
}]
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
go(e){
let url = e.currentTarget.dataset.url
wx.navigateTo({
url: '/pages/web/web?url='+url,
})
}
}
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)