微信小程序-自定义组件与第三方组件vant-weapp

飞熊 • 2023年7月14日下午4:47 • 前端开发 • 阅读 380

1、在小程序中设置上传图片功能wx.chooseImage(Object object)

使用微信小程序自带的API，wx.chooseImage(Object object)

可以实现从本地相册选择图片或使用相机拍照。

（1）在任意的一个你想上传图片的页面的js文件最后处，写入

uploadImg(){
    wx.chooseImage({
      success: function(res) {
        console.log(res)
        this.setData({
          filePath:res.tempFilePaths[0]
        })
      }.bind(this), 
    })
  }

（2）然后在该页面的 wxml文件中，进行调用

<image src="{{filePath}}"></image>
<button bindtap="uploadImg">上传图片</button>

（3）效果

2、小程序请求数据

使用自带方法request请求数据，可以新建一个util文件夹，然后建立一个js文件tools，可以将封装好的request请求写入，方便调用。

/**
 * 把request请求封装成promise对象
 */
function request(url,data){
  return new Promise((resolve,reject)=>{
    wx.request({
      url,
      data,
      success:resolve,
      fail:reject
    })
  })
}

module.exports = {
  request
}

然后可以在需要调用接口的页面的onload函数里面进行使用，这里需要先导入后使用

const {request} = require('../../utils/tools.js')

onLoad: function (options) {
  
    //通过then进行调用
    request('http://net-music.penkuoer.com/banner',{})
      .then(res=>{
        // console.log(res)
        this.setData({
          images:res.data.banners
        })
      })
  },

3、如何获取当前输入框的值？

（1）先写一个输入框，然后添加触发输入框的一个事件

<input bindinput="changeVal" data-id="username" placeholder="请输入用户名"></input>
<input bindinput="changeVal" password="true" data-id="password" placeholder="请输入密码"></input>
<button bindtap="uploadImg">上传图片</button>
<button bindtap="sumHandle">提交</button>

（2）定义事件

 changeVal(e){
    console.log(e)
    var temData={}//设置一个临时的对象,动态的为它赋值属性
    temData[e.target.dataset.id]=e.detail.value
    this.setData(temData)
  },
  sumHandle(){
    console.log(this.data)
  }

（3）结果如下，此时就能打印出输入框的内容

4、小程序使用第三方插件vant-weapp

（1）需要在文件所在的cmd窗口中执行：npm init -y

（2）然后通过npm安装第三方包：npm i vant-weapp -S –production

（3）然后在微信开发者工具平台的工具选项中选择构建

（4）想要使用vant-weapp中的按钮，需要在app.json或index.json中引入组件

"usingComponents": {
  "van-button": "/miniprogram_npm/vant-weapp/button/index"
}

然后在wxml文件中进行使用

——-按钮类型

支持default、primary、info、warning、danger五种类型，默认为default

<vant-button type="danger">我是按钮</vant-button>

5、可以自定义组件并调用

（1）首先先创建一个自定义组件的文件夹

在自定义组件的wxml中写入：

<!--components/user/index.wxml-->
<view>
    <image class="coverImg"></image>
    <text class="title">哪吒传奇</text>
    <text class="desc">是什么呢</text>
</view>

然后可以在首页或者其他页面对自定义组件进行调用：

效果如下：

——-组件循环

在首页的wxml文件中对movies组件做一个循环

 <movies wx:for="{{movies}}" detail="{{item}}"></movies>

在首页的js文件中调用电影接口

request('https://api-m.mtime.cn/showtime/LocationMovies.api?locationId=290',{})
    .then(res=>{
      this.setData({
        movies:res.data.ms
      })
    })

为组件设置为一个变量，也就是调用接口

<view>
  <image class="coverImg" src="{{detail.img}}"></image>
  <text class="title">{{detail.tCn}}</text>
  <text class="desc">{{detail.commonSpecial}}</text>
</view>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149810.html