愚公系列-微信小程序
关注
分享
扫一扫
文章平均质量分 75
微信小程序阿里小程序
愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
展开
-
(精华)2020年8月7日 微信小程序 直播功能的实现
一：小程序代码端小程序直播使用小程序组件 live-pusher 组件和live-player组件首先开通直播权限小程序开发工具内进行推流拉流都不会成功，所以需要使用两个手机进行推拉流测试；1.github地址：https://github.com/phpljc/zhibo.git，不会使用git的话自行百度2.demo代码示例推流端代码url 使用下方的推流地址，复制粘贴 进来就行拉流端代码拉流端url播放域名：腾讯云直播后台添加播放域名，方法文档内有；直播码：看下图二：申转载 2020-08-07 16:35:50 · 529817 阅读 · 2 评论 -
(精华)2020年8月7日 微信小程序 实时音视频通话
微信小程序集成实时音视频通话功能背景在项目的开发当中，很多时候，我们会有音频、视频通话的需求，但是一般都不会自己来写，所以我们就需要借助第三方来实现。尤其是这次的项目开发当中，需要在微信小程序当中集成实时音视频通话的功能，这里使用腾讯云的实时音视频服务。腾讯云——实时音视频实时音视频官方文档：https://cloud.tencent.com/document/product/647文档位置：文档->视频服务->实时音视频官方文档介绍的比较，详细，一般按照步骤做，都可以完成，但可能也转载 2020-08-07 16:51:03 · 531079 阅读 · 1 评论 -
【愚公系列】2022年11月 微信小程序-Vant实现自定义tabBar
1、说明小程序自定义tabBar两种方式：一种采用官方自定义tabbar的方式，但是官方的自定义tabbar实际上也存在不少bug，比如某些情况下真机显示了两层。一种完全自己去实现，其实就是用fixed定位写一个，但是在页面切换的时候会有闪动的问题，因为不同的页面都要引入自定义tabbar这个组件，微信小程序里不同页面的组件并不会完全共用。2、配置使用。原创 2022-11-13 23:19:27 · 9975 阅读 · 1 评论 -
【愚公系列】2022年11月 微信小程序-全局数据共享
开发中经常会遇到组件共享数据的问题，在各种前端框架中都会有对应的全局共享组件，全局数据共享是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。用来创建 Store 实例对象用来把 Store 中的共享数据或方法，绑定到组件或页面中使用。原创 2022-11-13 19:53:53 · 9209 阅读 · 0 评论 -
【愚公系列】2022年11月 微信小程序-表格组件使用
移动端的页面本应该很少有table表格这样的展示、操作，但总归有这样的需求，然而平时用的vant和iview的小程序组件库都没有table组件，这下面讲解表格组件封装的案例。使用说明该组件具有 列表展示模式，勾选模式，展开行模式。复制下面的三个组件，到你的公共组件文件夹下（其实这三个组件也是也可以合为一体，因为empty与load_more组件是可以单独使用的，所以没有放到table组件中）在需要使用的页面引入table组件即可。1、相关接口参数说明类型默认值是否必填columns。原创 2022-11-11 23:10:54 · 12931 阅读 · 11 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-小微商户支付后端功能实现（node版）
微信支付是腾讯集团旗下的第三方支付平台，致力于为用户和企业提供安全、便捷、专业的在线支付服务。以“微信支付，不止支付”为核心理念，为个人用户创造了多种便民服务和应用场景。微信支付为各类企业以及小微商户提供专业的收款能力，运营能力，资金结算解决方案，以及安全保障。用户可以使用微信支付来购物、吃饭、旅游、就医、交水电费等。企业、商品、门店、用户已经通过微信连在了一起，让智慧生活，变成了现实。小程序内部API，要求商户开通了小程序支付功能第三方网站。原创 2022-10-20 23:46:16 · 9552 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-电商项目-UI框架的选型
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。手机扫描二维码可快速体验。原创 2022-09-23 23:26:00 · 8397 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-小微商户支付功能前申请准备工作
小微商户是指依据法律法规和相关监管规定免予办理工商注册登记、无营业执照的实体特约商户。1.小微商户仅限于餐饮、线下零售、居民生活服务、休闲娱乐、交通出行行业和其他线下行业申请小微商户，暂不支持通过此渠道入驻线上行业。2.小微商户适合没有营业执照的小摊卖主。比如流行的“地摊文化”，就可以用小微商户码来进行收款，小微商户只需要提供个人身份证、入账账户和摊位照片就可以入网，但是一个身份证主体在同一个服务商平台只能入网一个小微商户号。原创 2022-10-18 00:09:56 · 9548 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-微信支付小程序确认支付结果和退款功能实现（node）
微信小程序在支付成功后会给注册的接口发消息来通知订单支付成功的状态，下面是微信和接口通信的数据格式：微信通知频率为:15s/15s/30s/3m/10m/20m/30m/30m/30m/60m/3h/3h/3h/6h/6h-总计24h4m。原创 2022-10-12 23:51:02 · 11149 阅读 · 1 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-微信支付小程序内部API功能实现
微信支付是腾讯集团旗下的第三方支付平台，致力于为用户和企业提供安全、便捷、专业的在线支付服务。以“微信支付，不止支付”为核心理念，为个人用户创造了多种便民服务和应用场景。微信支付为各类企业以及小微商户提供专业的收款能力，运营能力，资金结算解决方案，以及安全保障。用户可以使用微信支付来购物、吃饭、旅游、就医、交水电费等。企业、商品、门店、用户已经通过微信连在了一起，让智慧生活，变成了现实。小程序内部API，要求商户开通了小程序支付功能第三方网站。原创 2022-10-11 23:22:36 · 11875 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-微信支付后端功能实现（node版）
微信支付是腾讯集团旗下的第三方支付平台，致力于为用户和企业提供安全、便捷、专业的在线支付服务。以“微信支付，不止支付”为核心理念，为个人用户创造了多种便民服务和应用场景。微信支付为各类企业以及小微商户提供专业的收款能力，运营能力，资金结算解决方案，以及安全保障。用户可以使用微信支付来购物、吃饭、旅游、就医、交水电费等。企业、商品、门店、用户已经通过微信连在了一起，让智慧生活，变成了现实。小程序内部API，要求商户开通了小程序支付功能第三方网站。原创 2022-10-11 22:12:45 · 11262 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-微信支付功能前申请准备工作
微信支付是腾讯集团旗下的第三方支付平台，致力于为用户和企业提供安全、便捷、专业的在线支付服务。以“微信支付，不止支付”为核心理念，为个人用户创造了多种便民服务和应用场景。微信支付为各类企业以及小微商户提供专业的收款能力，运营能力，资金结算解决方案，以及安全保障。用户可以使用微信支付来购物、吃饭、旅游、就医、交水电费等。企业、商品、门店、用户已经通过微信连在了一起，让智慧生活，变成了现实。小程序内部API，要求商户开通了小程序支付功能第三方网站。原创 2022-10-10 22:11:42 · 11483 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-收货地址功能实现
在电商系统中，收货地址是必不可少的功能，没有收货地址用户在下单就没法收到货，而且一个用户会有多个收货地址，比如寄给自己，或者寄给别人。一搬在收货地址选择中会有个默认收货地址以防止每次下单都要选择地址。原创 2022-10-09 23:27:15 · 12219 阅读 · 2 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-确认订单功能实现
订单创建是从用户下单开始的，当用户对商品进行下单后，系统会引导用户来到确认订单页面，此时系统会获取用户预下单的商品信息，同时判断商品是否涉及到优惠促销的信息，这些优惠券包括促销活动、优惠券、积分抵扣等，如果商品不参与优惠信息，则无此环节。原创 2022-10-09 22:13:35 · 12064 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-添加收货地址功能实现
在电商系统中，收货地址是必不可少的功能，没有收货地址用户在下单就没法收到货，而且一个用户会有多个收货地址，比如寄给自己，或者寄给别人。一搬在收货地址选择中会有个默认收货地址以防止每次下单都要选择地址。原创 2022-10-08 22:40:28 · 11073 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-商品购物车功能实现
在电商的核心交易流程中，购物车是其中非常重要的一环，它承担商品加购、价格计算、促销活动展示等功能，与会员系统、商品系统、库存系统、订单系统等紧密结合。vant-weapp的GoodsAction商品导航api参数说明类型默认值是否为 iPhoneX 留出底部安全距离booleantrue参数说明类型默认值text按钮文字string-icon图标类型，可选值见icon组件string-info图标右上角提示信息-url点击后跳转的链接地址string-原创 2022-10-05 23:20:29 · 12229 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-用户自动登录功能实现
登录组件的封装代码show : {let {userInfo , encryptedData , iv } = e . detail // 本地token与微信服务器上的session要分别对待 let tokenIsValid = false , sessionIsValid = false let res0 = await getApp() . wxp . checkSession() . catch(err => {原创 2022-10-04 22:59:27 · 10514 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面规格选择功能实现
vant-weapp的Popup 弹出层apiProps参数说明类型默认值show是否显示弹出层booleanfalsez-indexz-index 层级number100overlay是否显示遮罩层booleantrueposition弹出位置，可选值为 top bottom right leftstringcenterduration动画时长，单位为毫秒300round是否显示圆角booleanfalse自定义弹出层样式string‘’原创 2022-10-03 21:47:23 · 11141 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面说明和商品导航
vant-weapp的van-goods-action商品导航api参数说明类型默认值是否为 iPhoneX 留出底部安全距离booleantrue参数说明类型默认值text按钮文字string-icon图标类型，可选值见icon组件string-info图标右上角提示信息-url点击后跳转的链接地址string-link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo。原创 2022-10-02 23:32:32 · 10678 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-UI设计之蓝湖的使用
蓝湖是一款产品文档和设计图的共享平台，帮助互联网团队更好地管理文档和设计图。蓝湖可以在线展示Axure，自动生成设计图标注，与团队共享设计图，展示页面之间的跳转关系。蓝湖支持从Sketch、Ps一键共享、在线讨论，而且蓝湖只需简单几步就能将设计图变成一个可以点击的演示原型，蓝湖还支持分享给同事，让他也可以在手机中查看设计效果。蓝湖已经成为新一代产品设计的工作方式。原创 2022-10-02 23:32:00 · 11557 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面运费说明
vant-weapp的van-cell单元格api参数说明类型默认值title分组标题string-是否展示为圆角卡片风格booleanfalseborder是否显示外边框booleantrueCellGroup 外部样式类类名说明根节点样式类Cell Props参数说明类型默认值icon左侧图标名称或图片链接，可选值见 Icon 组件string-title左侧标题-标题宽度，须包含单位string-value右侧内容-label。原创 2022-10-01 23:39:27 · 10263 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面的标题及价格功能实现
vant-weapp的Layout布局apiRow Props参数说明类型默认值gutter列元素之间的间距（单位为 px）-Col Props参数说明类型默认值span列元素宽度-offset列元素偏移距离-外部样式类类名说明根节点样式类基础使用：Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。原创 2022-10-01 23:38:06 · 10935 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面的轮播图功能实现
轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面，还有网易云音乐App的发现模块主页。小程序swiper的api属性类型默认值必填说明最低版本booleanfalse否是否显示面板指示点1.0.0color否指示点颜色1.1.0color#000000否当前选中的指示点颜色1.1.0autoplaybooleanfalse否。原创 2022-09-29 22:25:54 · 11433 阅读 · 0 评论 -
【愚公系列】2022年10月 微信小程序-电商项目-使用vtabs实现商品列表页
要实现商品列表页需要使用到weui的纵向选项卡（vtabs）功能，用于让用户在不同的视图中进行切换。vtabs属性名类型默认值必选描述vtabsArray[]yes数据项格式为{title}active-tabNumber0no激活选项卡索引Stringno选项卡样式Stringno行为样式String#ff0000no选定项目带下划线的一面的颜色String#000000no未选中的字体颜色String#ff0000no检查字体颜色。原创 2022-09-27 23:26:22 · 9425 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-获取WIFI信息
微信小程序货期WIFI信息主要分为以下几个步骤getSystemlnfo：查看平台环境startWifi：启动WiFi模块getWifiList：尝试拉取WiFi列表onGetWifiList：监听WiFi列表到达connectWifi：连接WiFi。原创 2022-09-22 22:49:34 · 10001 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-Page页面扩展
在小程序日常开发中，有些功能是所有页面都需要使用的，所以就需要对每个page页面进行扩展，在小程序中Page 的作用相当于构造函数， Page 会初始化页面对象然后将配置参数中的属性 merge 到页面对象上。原创 2022-09-20 22:40:25 · 8656 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-自定义tabBar的实现
因为小程序自带的tabBar，比较单一，无法满足多样化需求，这样就需要自己自定义tabBar。全局app.json配置文件禁用自带tabBar"pagePath" : "pages/index" , "iconPath" : "components/custom-tab-bar/component.png" , "selectedIconPath" : "components/custom-tab-bar/component-on.png" , "text" : "首页" } , {原创 2022-09-18 22:32:07 · 124941 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-小程序登录面板功能实现
button bindtap = "showLoginPanel2" type = "primary" > 手动打开登录面板 < / button > < LoginPanel2 show = "{{showLoginPanel2}}" > < / LoginPanel2 >原创 2022-09-17 23:50:01 · 8269 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-小程序登录功能完整流程
获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo。检查登录态是否过期。通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效。反之如果用户一直在使用小程序，则用户登录态一直保持有效。具体时效逻辑由微信维护，对开发者透明。开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效。转载 2022-09-16 23:23:45 · 8324 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-promise详解
Promise 其实是异步编程的一种解决方案，主要为了解决地狱回调得问题，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，可以从改对象获取异步操作的消息。pending（待解决，这也是初始化状态）fulfilled（完成）rejected（拒绝）promise主要是同过then来接收数据的，主要包含以下方法。原创 2022-09-14 23:52:33 · 8614 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-three.js加载3D模型
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。Three.js相关文档：http://docs.thingjs.com/安装第三方包：二、3D模型相关js文件三、效果图四、总结three.js画一个图形主要经历如下八个步骤：原创 2022-09-13 20:06:30 · 10719 阅读 · 1 评论 -
【愚公系列】2022年09月 微信小程序-three.js绘制多维旋转正方体
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。1.创建透视相机2.创建场景3.创建光源4.构造辅助网格5.创建加载器，加载模型文件6.创建渲染器，渲染场景7.创建控制器8.循环渲染场景。原创 2022-09-13 19:55:40 · 8293 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-three.js绘制正方体
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。1.创建透视相机2.创建场景3.创建光源4.构造辅助网格5.创建加载器，加载模型文件6.创建渲染器，渲染场景7.创建控制器8.循环渲染场景。原创 2022-09-13 19:51:06 · 8826 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-three.js绘制球体
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。1.创建透视相机2.创建场景3.创建光源4.构造辅助网格5.创建加载器，加载模型文件6.创建渲染器，渲染场景7.创建控制器8.循环渲染场景。原创 2022-09-12 23:18:54 · 8554 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-WebGL纹理材质的使用
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。原创 2022-09-12 22:46:24 · 8627 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-WebGL立体图形的绘制
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。原创 2022-09-12 22:38:32 · 15232 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-WebGL动画的使用
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。原创 2022-09-11 17:49:59 · 16127 阅读 · 1 评论 -
【愚公系列】2022年09月 微信小程序-WebGL画渐变色正方形
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。原创 2022-09-10 22:55:52 · 14688 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-微信小程序实现网页一键登录功能
使用微信开放功能button按钮绑定点击事件为获取用户授权授权成功调用微信登录接口获取code用获取到的code去调用后台接口获取到用户的openidcode+openid去调用后台写的小程序自动登录接口获取到access_tokenaccess_token拿到就可以去查询用户信息了。原创 2022-09-09 23:10:57 · 16655 阅读 · 0 评论 -
【愚公系列】2022年09月 微信小程序-WebGL画正方形
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。原创 2022-09-08 23:25:55 · 15040 阅读 · 0 评论