使用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)

    下面实例是我把图书图片上传到服务器
    0_1550498123087_%5CUsers%5C%E6%9B%BE%E5%BE%B7%E5%B7%8D%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1550497653432.png

    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>
    
    效果

    0_1550498136003_%5CUsers%5C%E6%9B%BE%E5%BE%B7%E5%B7%8D%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1550496707732.png

    3*3的轮播图

    分享按钮

    button组件

    选择open-type='share'

    <button open-type='share' class='share'>转发好友</button>
    

    4最后

    更多的小程序原生组件和api等待探索


 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

与 Dian 的连接断开,我们正在尝试重连,请耐心等待