微信小程序入门开发超详细笔记(三) 项目篇

最新推荐文章于 2024-02-28 16:24:48 发布
最新推荐文章于 2024-02-28 16:24:48 发布
阅读量607 收藏 5
点赞数
文章标签： 小程序 web app android vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/layxing27/article/details/109401124
版权

文章目录

1 创建项目

2 开发项目

2.1 底部导航模块设计(原生)

2.1.1 引入

2.1.2 配置

  • app.json中配置
{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/profile/profile",
    "pages/golist/golist"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "backgroundColor":"#000",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle":"white",
     "enablePullDownRefresh":true
  },
  "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#16f2e7",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/tabs/img/home.png",
      "selectedIconPath": "/tabs/img/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/tabs/img/message.png",
      "selectedIconPath": "/tabs/img/message-active.png"
    },
    {
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "/tabs/img/profile.png",
      "selectedIconPath": "/tabs/img/profile-active.png"
    }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.1.3 显示如下

在这里插入图片描述

2.2 底部导航模块设计(自定义)

  • 使用vant-UI组件设计
  • vant-UI官网链接
  • 1 修改app.json文件"custom": true,
  • 2 引入自定义tabbar文件夹custom-tab-bar
  • 3 引入使用的UI组件库vant
  • 4 配置custom-tab-bar/index.js
  • 5 配置custom-tab-bar/index.wxml
  • 6 配置每个页面自定义跳转index.js

2.2.1 引入

在这里插入图片描述

2.2.2 文件如下

app.json文件
{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/profile/profile",
    "pages/golist/golist"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "backgroundColor":"#000",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle":"white",
     "enablePullDownRefresh":true
  },
  "tabBar": {
    "custom": true,
    "color": "#dddddd",
    "selectedColor": "#16f2e7",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/tabs/img/home.png",
      "selectedIconPath": "/tabs/img/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/tabs/img/message.png",
      "selectedIconPath": "/tabs/img/message-active.png"
    },
    {
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "/tabs/img/profile.png",
      "selectedIconPath": "/tabs/img/profile-active.png"
    }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
custom-tab-bar 文件夹下配置
1 custom-tab-bar/index.js 文件
Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    "list": [
      {
      "pagePath": "/pages/home/home",
      "text": "主页",
      "iconPath": "/tabs/img/home.png",
      "selectedIconPath": "/tabs/img/home-active.png"
    },
    {
      "pagePath": "/pages/message/message",
      "text": "消息",
      "iconPath": "/tabs/img/message.png",
      "selectedIconPath": "/tabs/img/message-active.png"
    },
    {
      "pagePath": "/pages/profile/profile",
      "text": "我的",
      "iconPath": "/tabs/img/profile.png",
      "selectedIconPath": "/tabs/img/profile-active.png"
    }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      wx.switchTab({
        url:this.data.list[e.detail].pagePath
      })
    }
  }
})
2 custom-tab-bar/index.wxml 文件
<!--miniprogram/custom-tab-bar/index.wxml-->
<van-tabbar active="{{ selected }}" bind:change="switchTab">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" class="my">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>
3 custom-tab-bar/index.json 文件
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "/vant/tabbar/index",
    "van-tabbar-item": "/vant/tabbar-item/index"
  }
}
4 custom-tab-bar/index.json 文件
.my image{
   width: 70rpx;
   height: 70rpx;
}
其他文件夹下配置
pages/home/home.js
// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if( typeof this.getTabBar==='function' && this.getTabBar){
      this.getTabBar().setData(
        {
          selected:0
         }
      )
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
pages/message/message.js
// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if( typeof this.getTabBar==='function' && this.getTabBar){
      this.getTabBar().setData(
        {
          selected:1
         }
      )
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
pages/profile/profile.js
// pages/profile/profile.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if( typeof this.getTabBar==='function' && this.getTabBar){
      this.getTabBar().setData(
        {
          selected:2
         }
      )
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

2.2.3 如下

在这里插入图片描述

2.3 主页轮播图

1 接口启动

在这里插入图片描述

2 文件如下

  • app.js中配置接口baseURL:'http://127.0.0.1:3000'
  • utils/req.js 编写请求文件
  • home.js 请求数据
  • home.wxml 编写接口
  • home.wxss 编写样式
项目结构

在这里插入图片描述

1 app.js
//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    baseURL:'http://127.0.0.1:3000'
  }
})
2 req.js

  const app = getApp()
  // const host = 'http://127.0.0.1:3000'

  const request = (url, options) => {
     // 请求之前提示加载中
    wx.showLoading({title: '加载中...'})
    return new Promise((resolve, reject) => {
      wx.request({
        url: `${app.globalData.baseURL}${url}`,
        // url: host + url,
        method: options.method,
        data: options.method === 'GET' ? options.data : JSON.stringify(options.data),
        header: {
          'Content-Type': 'application/json; charset=UTF-8',
          'x-token': 'x-token'  // 看自己是否需要
        },
        success: resolve,
        fail: reject,
        // success(request) {
        //   // console.log(request)
        //   if (request.statusCode === 200) {
        //     resolve(request.data)
        //   } else {
        //     reject(request.data)
        //   }
        // },
        // fail(error) {
        //   reject(error.data)
        // }
        complete() {
        	wx.hideLoading()
      	}
      })
    })
  }

  const get = (url, options = {}) => {
    return request(url, { method: 'GET', data: options })
  }

  const post = (url, options) => {
    return request(url, { method: 'POST', data: options })
  }

  const put = (url, options) => {
    return request(url, { method: 'PUT', data: options })
  }

  // 不能声明DELETE（关键字）
  const remove = (url, options) => {
    return request(url, { method: 'DELETE', data: options })
  }

  module.exports = {
    get,
    post,
    put,
    remove
  }
3 home.js
// pages/home/home.js
const http = require('../../utils/req')
Page({

  /**
   * 页面的初始数据
   */
  data: {
      swiper:[]
  },
  async getSwiper(){
   const res = await http.get('/slides')
   this.setData({
     swiper:res.data
   })  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if( typeof this.getTabBar==='function' && this.getTabBar){
      this.getTabBar().setData(
        {
          selected:0
         }
      )
    }
    this.getSwiper()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
4 home.wxml
<!--pages/home/home.wxml-->
<!-- 轮播图 -->
<view>
  <swiper 
  autoplay="true" circular indicator-dots class="my">
  <block wx:for="{{swiper}}" wx:key='index'>
    <swiper-item>
     <navigator wx:if="{{item.link}}" url="{{item.link}}" >
      <image src="{{item.image}}" mode="aspectFill" class="slide-image"/>
     </navigator>
     <image wx:else src="{{item.image}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>
</view>
5 home.wxss
/* pages/home/home.wxss */
.my{
  height: 280rpx;
}
.my image{
  width: 750rpx;
}

在这里插入图片描述

2.4 主页九宫格

  • 引入UI组件home.json
  • 请求数据home.js
  • 渲染页面home.wxml
  • 编写样式home.wxss

1 home.json

{
  "usingComponents": {
    "van-grid": "/vant/grid/index",
    "van-grid-item": "/vant/grid-item/index"
  }
}

2 home.js

// pages/home/home.js
const http = require('../../utils/req')
Page({

  /**
   * 页面的初始数据
   */
  data: {
      swiper:[],
      grids:[]
  },
  //  获取轮播图数据
  async getSwiper(){
   const res = await http.get('/slides')
   this.setData({
     swiper:res.data
   })  
  },
  // 获取九宫格数据
 async getGirds(){
   const  res = await http.get('/categories')
   this.setData({
     grids:res.data
   }) 
 },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if( typeof this.getTabBar==='function' && this.getTabBar){
      this.getTabBar().setData(
        {
          selected:0
         }
      )
    }
    this.getSwiper()
    this.getGirds()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

3 home.wxml

<!--pages/home/home.wxml-->
<!-- 轮播图 -->
<view>
  <swiper 
  autoplay="true" circular indicator-dots class="my">
  <block wx:for="{{swiper}}" wx:key='index'>
    <swiper-item>
     <navigator wx:if="{{item.link}}" url="{{item.link}}" >
      <image src="{{item.image}}" mode="aspectFill" class="slide-image"/>
     </navigator>
     <image wx:else src="{{item.image}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>
</view>
<!-- 九宫格数据 -->
<view>
  <van-grid column-num="3">
  <van-grid-item 
  icon="{{item.icon}}" 
  text="{{item.name}}" 
  wx:for="{{ grids }}"
  wx:key="index"
  url="/pages/golist/golist?id={{item.id}}" />
</van-grid>
</view>

4 home.wxss

/* pages/home/home.wxss */
.my{
  height: 280rpx;
}
.my image{
  width: 750rpx;
}

在这里插入图片描述

2.5 详情页面的编写

  • golist.json 引入UI组件
  • golist.js 请求数据
  • golist.wxml 编写结构
  • golist.wxss 编写样式

1 golist.json

{
  "usingComponents": {
    "van-card": "/vant/card/index"
  },
  "enablePullDownRefresh":true
}

2 golist.js

// pages/golist/golist.js
const http = require('../../utils/req')
Page({
  /**
   * 页面的初始数据
   */
  data: {
      id:'',
      detail:[],
      page:1,
      pageSize:20,
      flag:false
  },
  getMore(){
    this.data.page++
    this.goDetails()
  },
  // 向下刷新
  reset(){
   this.setData({
    detail:[],
    page:0,
    flag:false
   })
   this.goDetails()
  },
async goDetails(){
  //  如果没有数据则返回
  if(this.data.flag===true) return
  // 得到数据
  const res = await http.get(`/shops?categoryId=${this.data.id}&_page=${this.data.page}&_limit=${this.data.pageSize}`)
  // 判断是否有数据
  const flag = this.data.page * this.data.pageSize > res.header['X-Total-Count']
  this.setData({detail:this.data.detail.concat(res.data),flag})
},
// 修改上导航标题
async  getDetailId(){
  const res =  await http.get('/categories/'+this.data.id) 
  wx.setNavigationBarTitle({
    title: res.data.name,
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    // 获取路由传过来的参数
    await   this.setData({id:options.id})
    await  this.getDetailId()
    await   this.goDetails()
    this.getMore()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
   this.reset()
   wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getMore()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

3 golist.wxml

<!--pages/golist/golist.wxml-->
<view>
  <van-card
  title="{{item.name}}"
  thumb="{{ item.images[0] }}"
  wx:for="{{detail}}"
  wx:key="index"
>
<view slot="price">
  联系电话: {{item.phone}}
</view>
<view slot="desc">
  地址: {{item.address}}
</view>
</van-card>
</view>
<view class="my">
  <text hidden="{{flag}}">加载更多</text>
  <text hidden="{{!flag}}">加载完毕</text>
</view>

4 golist.wxss

/* pages/golist/golist.wxss */
.my{
  text-align: center;
}

在这里插入图片描述

3 项目总结

3.1 json文件

  • 页面的json文件只能陪着项目app.json文件里面的属性
    在这里插入图片描述

3.2 文件找不到

  • 新引入的文件找不到,需要重新启动项目(不是重新编译)
  • 新引入的文件找不到,可以重新新建目录

3.3 页面文件

  • 页面文件在项目的app.json中直接添加即可,项目会自己创建文件

3.4 路由传参问题

  • 直接传参即可(不需要使用字符串模板)
    • 传参: url="/pages/golist/golist?id={{item.id}}"
    • 接收参数: 在onload方法中options.id

3.5 修改和获取data

  • 修改变量 this.setData({name:'lay'})
  • 获取变量 this.data.name

3.6 设置导航标题

  • 修改:wx.setNavigationBarTitle({ title: res.data.name })

3.7 自定义tabbar

  • 在app.json 中设置"custom": true,
  • 在整个项目文件中引入custom-tab-bar 文件夹
  • 修改custom-tab-bar 下的文件

项目源码

  • 码云地址:https://gitee.com/lakerzhang/shop.git
laker Zhang
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序笔记入门到做项目
08-28
微信小程序笔记，步骤很详细有
《微信小程序开发实战》学习笔记chapter1微信小程序人门
10-21
学习笔记：# Chapter01 微信小程序入门 1. 微信小程序介绍 1.1 什么是微信小程序 1.2 微信程序的优势 2. 开发环境搭建 3. 微信开发者工具 4. 微信小程序文件结构
html2Canvas+JsPDF 导出pdf 无法显示网络图片
qq_38935512的博客
07-21 950
问题：类似于下面着这种网络图片使用img导出的时候是空白的。解决：将网络图片转成base64。
Vue 如何将网页转换成PDF实现步骤以及问题解决：
weixin_54515240的博客
03-03 6201
vue/vue3 中如何将页面转换成pdf，并且解决pdf清晰度和文件大小问题
微信小程序基础架构浅析（开发入门篇）
最新发布
qq_39172059的博客
02-28 1350
在图1-9所示的界面中选择小程序项目，输入小程序的项目名称，选择代码存放的路径，填入在小程序管理后台获取到的APPID，勾选 “不使用云服务”，点击新建，你就创建了你的第一个小程序项目了。由于小程序采用的是渲染和逻辑分离的运行机制，这种做法与传统的网页的运行机制存在差异，无法使用传统的网页编程中的开发、调试工具，为此微信专门为小程序开发推出了一个一站式IDE：微信开发者工具。
Html2canvas——生成画布时图片显示空白
热门推荐
Boboy
11-22 1万+
Html2canvas图片空白
JS使用html2canvas和jspdf导出Html页面到PDF 页面中图片不显示问题与浏览器
zhuyuewolf的博客
02-26 4637
如果，html2canvas已经设置 useCORS 为 true，即已经开启图片跨域，但是，仍然不能将页面中图片在导出的pdf中显示出来。 那么，可能就是浏览器的问题，换个浏览器吧，换谷歌浏览器或IE浏览器试试。 我就被这个问题坑了一整天。最后，实在没办法了，我突然想到换谷歌浏览器试试，然后，就发现代码正确，图片也显示了。所以，以后尽量用谷歌浏览器进行前端开发。不用QQ浏览器。[泪目] ...
html 转 PDF wkhtmltopdf image 不能显示的问题
diejiu2046的博客
03-17 4097
把src的路径修改为本地路径 就可以，如 <img src="file:///C:\a.jpg"> 转载于:https://www.cnblogs.com/tangruixin/p/3605571.html
C#程序员入门学习微信小程序的笔记
12-01
因为工作需要，最近学习了一下微信小程序，在此分享一下大概的流程。 强烈建议大家先去看微信小程序简易教程：点我进入 起步 客户端打开小程序的时候，就将代码包下载到本地进行解析，首先找到了根目录的 app.json ...
微信小程序入门+实战案例+代码+常用demo
08-13
微信小程序入门教程+实战案例展示+实战代码+常用demo，
vue项目js代码中输出html代码时，使用img标签引用图片不显示的解决方法
demons19961019的博客
08-12 1811
vue项目js代码中输出html代码时，使用img标签引用图片不显示的解决方法，图片放置在public打包后的目录下。使用变量承载并require图片路径。此时页面图片展示不出来。
vue 使用html2canvas导出地图 图片空白问题 记录问题
weixin_50867375的博客
12-28 847
导出地图 空白
倒计时形式处理时间
一只正在努力进化的程序猿
07-31 139
function formatTime($date) { $str = ''; //$timer = strtotime($date); $timer = $date; $diff = $_SERVER['REQUEST_TIME'] - $timer; $day = floor($diff / 86400); $free = $diff % 864...
Vue导出页面为PDF格式，解决PDF中图片不显示(跨域)
陈怂怂的博客
03-31 3168
实现Vue导出页面为PDF格式【笔记】 首先需要安装两个工具： npm install --save html2canvas npm install jspdf --save 创建htmlToPdf.js 文件，个人习惯放在plugins文件夹中，具体代码如下： // 导出页面为PDF格式 import Vue from "vue" import html2canvas from "html2canvas" import JSPDF from "jspdf" const htmlToPdf = {
vue前端生成PDF文档（不用后端）
ingenuou_的博客
02-08 2960
vue前端生成PDF报告
VUE 网页生成 PDF
我的博客
04-20 1万+
保存当前网页为PDF格式到本地 一、安装依赖 1. npm install --save html2canvas // 作用是html转图片 2. npm install jspdf --save // 再将图片转为pdf 二、设置格式函数 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export def...
Vue3导出pdf方案
weixin_45021027的博客
03-04 3168
1.引入两个依赖2.在utils文件夹下新建htmlToPdf.js文件：还可以传多个不同容器id3.来到需要将vue转成pdf的页面:多个容器不同id。
vue页面生成pdf，解决图片不能导出问题
Mr_Shil的博客
09-17 933
1、安装html2canvas： npm install --save html2canvas 2.在index.html引入jspdf <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> 可能是我网络不好的原因，引入经常失败，我将jspdf文件下载下来放到了本地 文件下载链接：https://download.csdn.net/downloa
微信小程序云开发 入门
09-02
微信小程序云开发是一种基于微信云开发能力的开发方式，可以帮助开发者轻松搭建小程序后端服务。下面是入门微信小程序云开发的步骤： 1. 开通云开发：在小程序管理后台中，选择开发-开发设置，点击按钮开通云开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值