微信小程序,微信小程序开发教程

uniapp微信小程序分包教程，一步步如何分包

uniapp微信小程序项目有时页面一多就会超出2m，微信小程序官方限制是2m，超出2M，无法上传发布，我们可以通过分包来实现。一、新建分包目录在pages目录下新建subPages目录，用于存放分包目录和文件二、把需要分包的目录放置到subPages下，如下图：三、修改pages.json文件1、这里把分包路径目录subPackages数组放置至pages同级"subPackages": [{ "root": "pages/subPages", "pages": [ { "path": "ai/index", "style": { "navigationBarTitleText": "AI测肤", "enablePullDownRefresh": false } }, { "path":

uniapp在提交的时候实现多图上传功能

21天前

274 0

一、效果展示可以实现多图上传，删除功能二、上传接口封装1、在untils目录下新增一个crmRequest.js文件，编写如下代码 const BASE_URL = "https://examle.com" //图片上传 export const crmUploadImage = async (image) => { ;// 检查传入的 image 是否是文件类型 ;if (!image) { ;;throw new Error('No file provided'); ;} ;try { ;;return new Promise((resolve, reject) => { ;;;uni.uploadFile({ ;;;;url: BASE_URL+'/repair/upload/uploadImg', // 替换为实际的接口地址 ;;;;filePath: image, // 当前文件路径 ;;;;method: 'P

uniapp列表页面实现动态耗时功能展示

21天前

239 0

一、需求描述今天做到一个项目是需要动态显示耗时功能，也就是uniapp微信小程序中显示耗时功能如下图：二、代码逻辑编写一个动态时间方法，获取数据之后调追加给列表三、完整代码实现<template> <view class="content"> <view class="list"> <repeat v-for="(item, index) in list" :key="item.id"> <view class="list_item"> <navigator :url="'/pages/repair/repair_detail?id='+item.id" hover-class="none"> <view class="device_name"> <view class="devi

uniapp微信小程序使用echarts教程

2025-10-21

1030 0

echarts 全端兼容，一款使echarts图表能跑在uniapp各端中的插件, 支持uniapp/uniappx(web,ios,安卓,鸿蒙)，本文介绍如何在uniapp中使用echarts，可自由选择所需图表、坐标系、组件进行打包下载。一、下载扩展包可以选插件内完整的echarts包二、将扩展包放置指定路径这里放在项目根目录/lime-echart三、页面扩展包引入<script> import * as echarts from '@/lime-echart/static/echarts.min' </script> 四、页面代码<template>  ;;;;;;<view style="width:750rpx; height:550rpx"><l-echart

uni-app微信小程序实现发送验证码+倒计时功能

2024-10-20

1840 0

一、效果展示：用户输入手机号，验证手机号是否正确，正确发送验证码，校验验证码。二、uniapp前端界面代码<template> <view class="fixed_menban"> <view class="fixed_c"> <view class="colse" @click="colse"> <image src="../../static/colse.png" ></image> </view> <view class="link"> <view class="left_phone"> <image src="../../static/phone.png" ></image> </view> <view class="center_link"> <image src=".

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

2024-08-16

2837 0

一、需求分析在做uniapp开发的时候，做图片上传，需要对用户上传的图片进行裁剪后，再上传图片，然后给到用户自己去裁剪图片。二、插件截图三、功能描述用户点击上传图片，可以对其进行裁剪，旋转，编辑，放大缩小四、插件下载微信扫描下方，二维码关注公众号，回复"图片裁剪"，详细操作，请看图片五、插件使用方法1、下载好插件，放到组件目录 components 目录下，没有 components 目录的话就新建目录，如下图：2、放置上传图片按钮<button size='primary' lang="zh_CN" @click="onChooseFile" class="btn3">上传图片</button&g

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

2024-08-11

1450 0

一、问题描述使用npm安装wepy环境一直只能安装1.7.3版，以前是可以安装2.1.0版本。执行查看版本npm show wepy-cli versions 这里可以看到版本最新只能是1.7.3版本继续查看npm官网：https://www.npmjs.com/package/wepy-cli可以看到npm上的wepy版本是1.7.3版本，后面打开腾讯官方的wepy包，看到最新版本是2.1.0二、问题解决@wepy/cli@next 是指向最新的预发布版本（如 2.x 版本），而 wepy-cli 则是旧版本（如 1.7.3）。这表明 @wepy/cli 包含了更现代的功能和更新，而 wepy-cli 是旧版的包。切换到 @wepy/cli 你可以使用更新的功能和版本

微信小程序判断用户是电脑PC端打开还是手机端打开

2024-07-30

2732 0

一、需求分析有时间开发我们加入流量主广告，或者小程序一些功能需要只能手机端访问才生效，就需要用到判断用户是手机端打开还是电脑端打开，这就需要用到getSystemInfo获取设备信息二、需求解决wx.getSystemInfo({ ;success: function (res) { ;;let system = {win: false,mac: false,x11: false} ;;let pf = res.platform ;;;;let isPhone = true ;;;;system.win = pf.indexOf("win") == 0 || pf.indexOf("Win") == 0 ;;;;system.mac = pf.indexOf("mac") == 0 || pf.indexOf("Mac") == 0 ;;;;system.x11 = (pf == "X11") || (pf.indexO

$关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法$

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

2024-07-28

1250 0

问题复现：Windows11 在 vscode中运行 wepy 项目报如下错误：wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置行:1 字符: 1+ wepy build --watch+ ~~~~;;+ CategoryInfo;;;;;: SecurityError: (:) []，PSSecurityException;;+ FullyQualifiedErrorId : UnauthorizedAccess问题原因：这个错误表明你在尝试运行 wepy 命令时，遇到了 PowerShell 的脚本运行策略限制。默认情况下

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

2024-07-26

1195 0

微信小程序创建wepy框架项目，运行报如下错误：wepy build --watch[15:55:58] ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev".[15:55:58] ERR! init Can't resolve '@wepy/compiler-less' in 'F:\study\wepy\myproject1'[15:55:58] ERR! init Make sure module "@wepy/compiler-babel" is installed. If not please try "npm install @wepy/compiler-babel --save-dev".[15:55:58] ERR! init Can't resolve '@wepy/compiler-babel' in 'F:\study\wepy\

uniapp实现滑动指定位置显示顶部导航

2024-03-22

2238 0

uniapp实现滑动指定位置显示顶部导航，通过监听页面滚动位置，进行判断是否展示，是的话就增加class名称on1、在顶部导航加入配置： :scroll-top="scrollTop" 和 scroll="onPageScroll"<template>  <view class="container" :scroll-top="scrollTop" scroll="onPageScroll"> <view :class="!showNavbar ? 'home_head' : 'home_head on'"> <view class="home_head_search"> <image src="../../static/home_head_search.png"></image> <view class="">想搜点什么

uniapp微信小程序如何自定义底部tabbar导航

2024-03-22

4867 0

微信小程序默认的tabbar不是很好看，我们可以自自定义底部导航，自定义样式，以下是个uniapp案例demo，供大家参考和使用：一、创建components组件tabbar.vue二、编写底部导航<template>  <view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"> <view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)"> <view class="column-me row-center tabbarActive" v-if="current == item.id"> <view :c

微信小程序实现游戏进度条展示

2024-01-17

2090 0

工作中遇到需要实现一个微信小程序类似游戏进度条的效果，以下是个案例，分享给大家。一、成品效果展示：二、HTML代码：wxml<view class="fixeed_loading" wx:if="{{hideloading}}"> ;<view class="loadingbox"> ;;<view class="loading"> ;;;<view class="loading_h" style="width: {{progress}}%;"></view> ;;;<view class="numq";style="position: absolute; left: {{progress-10}}%;"> ;;;;<view class="numqnei">{{progress}}</view> ;;;</view> ;;</view> ;;<view

使用weapp.qrcode.js 在微信小程序中，快速生成二维码

2023-11-13

3480 0

本文使用weapp.qrcode.js 在微信小程序中，快速生成二维码，供大家参考：插件地址（码云直通车）：https://gitee.com/YuJian11/wxQRCode使用说明：先在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, canvasId 。<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas> 直接引入 js 文件，使用 drawQrcode() 绘制二维码。!!!在调用 drawQrcode() 方法之前，一定要确保可以获取到 canvas context 。// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目目录中import drawQrcode from '../

微信小程序设置屏幕长亮以及屏幕亮度调到最高

2023-11-03

5053 0

疫情的时候，我们可以看到健康码生成后屏幕一直是长亮和亮度最高的，到底是怎么设置的？是通过下面进行设置的。1、设置是否保持常亮状态。仅在当前小程序生效，离开小程序后设置失效。wx.setKeepScreenOn({ ;keepScreenOn: true }) 2、设置屏幕亮度：value屏幕亮度值，范围 0 ~ 1，0 最暗，1 最亮。在安卓端支持传入特殊值 -1，表示屏幕亮度跟随系统变化wx.setScreenBrightness({ ;value: 1 })

微信小程序如何获取手机号，无需解密版

2023-11-02

2443 0

以往我们旧的接口：https://api.weixin.qq.com/sns/jscode2session?appid=appid&secret=secret&js_code=jscode&grant_type=authorization_code获取手机号码，需要到服务端引入官方解密方法对手机号进行解密，但是这个解密很不稳定，经常出现-41003: aes 加密数据解密失败问题，现在可以使用下面新的接口获取手机号：步骤：1、获取微信凭证access_token2、动态获取手机号注：该接口需配合手机号快速验证或手机号实时验证能力一起使用，当用户同意后，可以通过 bindgetphonenumber 或 bindrealtimegetphonenumber 事件回调获取

解决新版接口微信小程序获取头像信息模糊问题

2023-09-20

4988 0

一、前言：相信很多微信小程序开发者在使用微信授权头像的时候，会发现授权得的临时图片特别模糊，以下教大家如何改善和解决图片模糊问题二、方案流程：1、用户授权图片后，把用户头像上传至服务器2、微信小程序端通过图片上传接口把图片传给服务器，3、服务器通过微信官方高清图片接口，把图片进行高清化，服务器通过接口返回给前端4、微信小程序端把返回的高清图片进行一系列的操作三、解决方案：3.1、小程序端：放置获取头像按钮<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"> ;

2024微信小程序使用open-type="chooseAvatar"获取用户头像信息，以及图像模糊解决方法方案

2023-09-15

8355 0

前景：国庆节快到了，很多小伙伴会使用微信小程序来制作国庆头像框，而小程序获取用户头像信息的 wx.getUserProfile 和 wx.getUserInfo 接口都已经于2022年废弃了，需要使用到新的方法来获取用户头像。从基础库 2.21.2 开始支持当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善。根据相关法律法规，为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，已接入内容安全服务端接口（mediaCheckAsync、msgSecCheck），以减少内容安全风险对开发者的影响。需要将

uni-app实现视频组件播放和暂停

2023-08-27

3708 0

前端获取视频id，使用pause()，play()方法控制视频播放和暂停。1、前端代码：<template> <view class="video"> <video id="videoId" :src="detail.resDetail.playUrl" autoplay='true' enable-play-gesture='true' controls='true' objectFit="cover" @fullscreenchange='fullscreenchange' play-strategy='2'></video> </view> <view @tap="play" v-if="isPlaying"> <image src="../../static/pasue.png" mode="widthFix"></image> <text>暂停</text> </view&

解决uni-app打包安卓app在平板或分辨率高的模拟器下不宽屏显示问题

2023-08-25

3384 0

在使用uni-app的时候，遇到一个情况就是uni-app打包安卓app在平板或分辨率高的模拟器下不宽屏显示问题，解决方法如下：加入如下代码即可"screenOrientation" : [ ;;;;;;"portrait-primary", ;;;;;;"landscape-primary", ;;;;;;"portrait-secondary", ;;;;;;"landscape-secondary" ;;;;], 打开源码视图，如下图：

解决uniapp下载视频，使用uni.downloadFile下载大文件会出现下载到一半就停止问题

2023-08-06

6602 0

uni.uploadFile(OBJECT)将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。1、问题描述：在使用这个uni-app这个文件下载接口的时候，发现下载到一半就停止下载，经过打印显示下载超时报错为：errMsg: "downloadFile:fail timeout"，可以看出示下载超时。后面看了文档有个参数：timeout，改参数不是必须填写的。timeout Number 否超时时间，单位 ms2、解决方法：我们

uniapp微信小程序分包教程，一步步如何分包

uniapp在提交的时候实现多图上传功能

uniapp列表页面实现动态耗时功能展示

uniapp微信小程序使用echarts教程

uni-app微信小程序实现发送验证码+倒计时功能

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

微信小程序判断用户是电脑PC端打开还是手机端打开

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

uniapp实现滑动指定位置显示顶部导航

uniapp微信小程序如何自定义底部tabbar导航

微信小程序实现游戏进度条展示

使用weapp.qrcode.js 在微信小程序中，快速生成二维码

微信小程序设置屏幕长亮以及屏幕亮度调到最高

微信小程序如何获取手机号，无需解密版

解决新版接口微信小程序获取头像信息模糊问题

2024微信小程序使用open-type="chooseAvatar"获取用户头像信息，以及图像模糊解决方法方案

uni-app实现视频组件播放和暂停

解决uni-app打包安卓app在平板或分辨率高的模拟器下不宽屏显示问题

解决uniapp下载视频，使用uni.downloadFile下载大文件会出现下载到一半就停止问题

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

uniapp微信小程序分包教程，一步步如何分包

uniapp在提交的时候实现多图上传功能

uniapp列表页面实现动态耗时功能展示

uniapp微信小程序使用echarts教程

uni-app微信小程序实现发送验证码+倒计时功能

一个uniapp微信小程序图片裁剪工具插件invinbg-image-cropper推荐

关于微信小程序框架wepy框架环境安装只能安装1.7版本解决方法

微信小程序判断用户是电脑PC端打开还是手机端打开

关于报错wepy : 无法加载文件 C:\Users\Hm\AppData\Roaming\npm\wepy.ps1，因为在此系统上禁止运行脚本的解决方法

解决小程序wepy框架运行报错问题ERR! init Make sure module "@wepy/compiler-less" is installed. If not please try "npm install @wepy/compiler-less --save-dev"

uniapp实现滑动指定位置显示顶部导航

uniapp微信小程序如何自定义底部tabbar导航

微信小程序实现游戏进度条展示

使用weapp.qrcode.js 在 微信小程序中，快速生成二维码

微信小程序设置屏幕长亮以及屏幕亮度调到最高

微信小程序如何获取手机号，无需解密版

解决新版接口微信小程序获取头像信息模糊问题

2024微信小程序使用open-type="chooseAvatar"获取用户头像信息，以及图像模糊解决方法方案

uni-app实现视频组件播放和暂停

解决uni-app打包安卓app在平板或分辨率高的模拟器下不宽屏显示问题

解决uniapp下载视频，使用uni.downloadFile下载大文件会出现下载到一半就停止问题

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录

使用weapp.qrcode.js 在微信小程序中，快速生成二维码