使用mpvue做图书商城使用的小程序原生组件以及api
-
mpvue支持使用微信小程序原生api和组件
0分享使用mpvue做图书商城使用的小程序原生组件以及api
1详情见小程序开发者文档
https://developers.weixin.qq.com/miniprogram/dev/index.html
2原生api(亲测可用)
小程序页面跳转
url:目标页面
wx.navigateTo({ url: 'test?id=1' })
显示/隐藏loading 提示框
wx.showLoading({ title: '加载中', })
wx.hideLoading(Object object)
wx.showModal(Object object)
显示模态对话框小程序原生
页面下拉刷新
wx.startPullDownRefresh(Object object)
wx.stopPullDownRefresh(Object object)
将本地资源上传到服务器
wx.uploadFile(Object object)
下面实例是我把图书图片上传到服务器
wx.uploadFile({ url: config.imghost + '/weapp/uploadfile', filePath: this.srcList[i], name: 'file', success: function (res) { const data = JSON.parse(res.data) const url = 'http://' + data.data.url urlList.push(url) console.log(urlList) }, complete: () => { if (i === length - 1) { wx.setStorage({ key: 'urlList', data: urlList }) this.srcList = [] wx.navigateTo({ url: '/pages/getisbn/main' }) } } })
3原生组件
swiper轮播图
<swiper :indicator-dots='true' indicator-color='#EA5149' :autoplay='true' :interval='6000' :duration='1000' :circular='true' > <div v-for='(top,imgindex) in imgUrls' :key='imgindex'> <swiper-item> <image @click="bookDetail(img)" mode='aspectFit' :src='img.image' v-for='img in top' class="slide-img" :key='img.id' /> </swiper-item> </div> </swiper>
效果
3*3的轮播图
分享按钮
button组件
选择open-type='share'
<button open-type='share' class='share'>转发好友</button>
4最后
更多的小程序原生组件和api等待探索