-
教程|在微信小程序实现一个幸运转盘小游戏
2021/1/5 14:59:07
本人主要介绍如何在微信小程序里面开发一个幸运转盘的小游戏,里面主要用到javascript和 css 语法,就可以轻松实现一个简单的幸运转盘(以6个奖品区为例)。当然,如果你有更好实现方案,欢迎在评论区留言。前言 本次教程需要你掌握一定量 javascript 和 css 基础知识,并且你需要有小程序一定的开发经验,具体需要掌握知识点有: css 的 position、transform、transition、ov... -
小程序开发第三弹: uni-app 框架基础
2021/1/5 14:59:05
uni-app 介绍 uni-app 是一个使用 Vue.js 核心库开发的前端小程序框架 ; 个人更喜欢这样认为 ; 其实他还可以编译原生App 和 H5 应用 ; 真正的实现了一套代码编译多端 ; 为什么选择它uni-app 上面说的很明确 Vue.js 语法 ; Vue 相关业务开发者基本无痛学习编译多端 ; 比较方便 ( 当然也有坑的地方, 但是对比小程序原生开发体验还是好太多, 个人认为 ) 快速上手 工具下... -
小程序-引入 echart 图表画圆饼图
2021/1/5 14:58:43
在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢下载使用 ec-canvas 在github上下载echarts-for-weixin代码,并将ec-canvas文件夹,复制拷贝到根目录路径下,与pages目录同级,或者放置到components自定义组件文件夹中 在引用ec-canvas时,相对路径引入正确即可 如下所示:pages/piecharts 配置 json { "usingComponents": { "ec-canvas":... -
微信小程序中 setData 详解
2021/1/5 14:58:39
在小程序中各个页面之间是相互独立的,一个页面分为渲染层(视图层 webview),逻辑层(JavaScript),系统层(底层),在架构上,WebView和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道,换而言之,若要将逻辑层中的data的数据渲染到页面中,他们之间是无法直接通信的,往往需要系统层作为中间角色 我们都知道视图层的数据来源于逻辑层 data,而视图图层若想要改变逻辑层 dat... -
在微信小程序中使用less(最优方式)
2021/1/5 14:58:36
写惯了 less/sass,但是现在开发小程序缺还是 css,很不习惯。 在网上搜的教程,要么是 gulp,要么就是 vscode 的 Easy-less 的插件。 传统方式 我们来对比,这两种方式的优劣。 Gulp 前者要对于 gulp 有简单的了解,但是现在大道其行的 webpack 来说,gulp 用的人也越来越少,而且具有一定的学习成本,但好在自定义程度较高,自己可以随便添加take。 VScodd的Esay-less... -
从前端的角度来梳理微信支付(小程序、H5、JSAPI)的流程
2021/1/5 14:58:34
因业务需要,开发微信支付功能,涉及三种支付方式:JSAPI 支付:微信内网页支付,需要开通微信服务号小程序支付:在小程序中支付,需要开通小程序H5 支付:在手机浏览器(出微信内网爷)中网页支付使用微信支付的前提必开通微信商户号,要使用到那种的支付方式要前需在商户平台开通(要审核)。支付的钱最终都会到商户号里(一般由公司财务开通)。开发微信支付的过程中大大小... -
uni-app中h5端和小程序数据请求封装和传参
2021/1/5 14:58:30
1.开发环境 uni-app2.电脑系统 windows10专业为版3.在使用uni-app开发的过程中,我们需要数据请求,但是使用uni-app 框架自带的请求方式我们需要写很多重复的代码,我进行了封装,希望对你有所帮助,为什么要封装h5端数据请求还要封装微信端的数据请求,下面会有所解释!4.封装前的数据请求方法:chengeth5(){ return new Promise((resolve,reject)=>{ ... -
uniAPP微信小程序获取当前地址
2021/1/5 14:58:28
首先你要去配置一下你的app.json 如下: "permission": { "scope.userLocation": { "desc": "获取你的位置信息...." } } 然后就可以你想在哪里展示就可以将代码贴哪里了(这里推荐提出把这个地址写成工具类独立出来方便以后要用直接可以用) <template> <view> <view class="positon-top"> <view class="current-locat... -
uniapp小程序父组件与子组件之间调用方法
2021/1/5 14:58:25
最近公司安排做一个仿微信聊天的小程序,先实现聊天的基本功能,在项目过程中遇到一些小的知识点,在这里做下笔记; 由于之前没有用过VUE,也没有做过小程序,在看了VUE官网和uniapp官网后,开始边学边做。 一,子组件调用父组件的方法 子组件 IMMsg<template> <view> <button @tap="showData(items)">获取数据</button> ... -
微信小程序获取openid的两种方法
2021/1/5 14:58:22
第一种:使用云开发这种比较简单,只需要开通云开发,创建云函数,调用云函数就可获得。调用云函数 Promise Cloud.callFunction(Object object) 返回一个Promise对象,所以不用考虑异步问题。callFunction说明 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/functions/Cloud.callFunction.html具体代码如下:我这里云函数名为helloCloud//... -
小程序闪退排查小技巧
2021/1/5 14:58:18
在使用小程序的时候,偶然会发生闪退。这里来讲一下闪退的问题该如何排查。版本排查发生闪退的时候,首先,要确认下 版本 是不是最新的。如果不是,建议更新版本再重试。旧版本的问题会在新版本进行修复哦。微信版本: 微信官网 基础库版本:基础库更新日志小程序自查确认版本都是最新情况下,还是有闪退的问题的话,建议先进行小程序自查~一般情况下,闪退是因为内存使用过多... -
uni-app适配自定义tabBar
2021/1/5 14:58:15
需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏。如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到。那么,就有以下两种可替代方法。 在每一个页面都加载一个tabBar组件,与页面同时渲染。设置自定义tabBar,修改tabBar的样式。 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面... -
微信小程序转换uni-app详细指南
2021/1/5 14:58:12
本文首先分享转换步骤和原理,文末会分享三方开发者制作的 小程序转uni-app的转换器 和 wepy转uni-app转换器 。 小程序转换uni-app的步骤 微信小程序的语法,其实是vue.js语法的裁剪定制版,在数据绑定、自定义组件等很多方面都有相似之处。 以下是一个小程序源码转换步骤指南: 客户端代码转换 新建一个uni-app项目,把之前的app.js、app.wxss的代码,挪到app.vue里... -
uni-app 开发支付宝/百度小程序注意事项
2021/1/5 14:58:10
HBuilderX 1.3.5 起,支持支付宝和百度小程序的开发编译。 平台差异 百度小程序 已知的差异/问题: 不支持属性选择器 不支持 scoped login / getUserInfo 等功能在模拟器(开发工具)上不能模拟 支付功能模拟不了 map 组件在开发工具上预览效果不对,但是手机上是对的。 getSystemInfo 获取到的 windowHeight 在模拟器中值不正确,真机预览是正确的。 v-if 和 v-... -
uni-app开发支付宝小程序踩坑
2021/1/5 14:58:07
自己踩的: 1.<canvas>要用id,而不是canvas-id,用的时候都写上 <canvas style="position:absolute;left:-99999upx;background:#f1f1f1;" :style="{width:width+'px',height:height+'px'}" canvas-id="qrcodeCanvas" id="qrcodeCanvas"></canvas> 复制代码2.保存图片用my.saveImage,而不是saveImageToPhotosAlbum // #ifdef MP-ALIPAY if (... -
用uniapp重写小程序问题汇总
2021/1/5 14:58:05
主要问题 bug: 通过ref调用组件方法时,发现使用的是上一次的数据。 原因:微信小程序可以在修改组件的properties的传值之后、立即调用组件方法; uniapp在修改组件prop的传值之后,需要在this.$nextTick中调用组件方法。 但是在百度小程序里,即使有this.$nextTick依然没有解决这个问题,于是又追加了一个setTimeout。 Error: [TMA][WARN][RUNTIME] Page route 错误 +0ms... -
各小程序框架实现思路学习记录
2021/1/5 14:58:01
小程序 已知,网页是单线程工作的,即是渲染进程在工作时,假如 JavaScript 引擎 执行 JavaScript 代码时,渲染进程会将控制权交予 JavaScript 引擎,不会两个进程同时在工作。因为,JavaScript 引擎 可能会操作DOM,所以,为了排除冲突,确保渲染正确,网页是单线程工作的。 但是,小程序,是双线程工作的。它分为逻辑层跟视图层。他们通过线程通信,共同完成视图的完整呈... -
微信小程序——拍照、压缩转换base64(不留存照片在本地相册) ...
2021/1/5 14:57:40
前言 通常使用wx.chooseImage这个api去拍照时通常会留下照片在本地相册,在一些需求情况下不需要留存照片所以在这里我们使用另一个wx.createCameraContext() 展示效果 js var compress = require('../../../../libs/compress.js'); const app = getApp() Page({ /** * 页面的初始数据 */ data: { showCamera: false, ctx: null, //拍照实例 ... -
浅谈微信小程序获取图片原始的宽度和高度
2021/1/5 14:57:38
前言 我们如何在微信小程序中获取一张图片的原始宽度和高度呢?原来微信小程序 image 组件提供了这样的能力,那这又有什么应用场景呢?官方文档 wxml 复制代码js onImgLoad: function (e) { const { width, height } = e.detail; }, 复制代码有什么应用场景呢实时计算图片高度和宽度保证图片不失真 // 如果宽度固定是340rpx 那么高度就应该这么计算 onImgLoad:... -
Java 后端 (Spring boot)+微信小程序的授权登录
2021/1/5 14:57:36
微信小程序的授权登录 第一、Java后端代码如下 登录的接口的参数是微信小程序前端必须要传的参数 微信小程序登录、授权的用户基本信息 wx.getUserInfo 特别注意 appid 和secret、grant_type是小程序固定的;可以参考wx.login param.add(“appid”, “wx367d7fb4108a5162”); param.add(“secret”, “a700cf3aab35e53e98be18f96ddb4ed9”); param.add(“js_code”, code); p... -
微信小程序如何自定义新用户引导页
2021/1/5 14:57:32
根据不同的需求,现在出现了给小程序添加新用户引导页面。 设计流程:指引用户点击右上角,将本小程序添加到我的小程序。点击“去试试”后不再显示。前提是新用户或者首次打开。 设计图: 实现步骤: 1》思路:在小程序首页生命周期函数中,加入条件判断。在用户点击【记住了,我去试试】事件上增加缓存信息。 2》用这个缓存在用户每次打开小程序的时候来判断是否显示 页面的...
推荐文章
- 2022国庆假期安排
- 云南网站制作流程
- 如何制作一个小程序
- 人人商城超级海边活动海报不显示bug修复 回复图片功能错误修复
- Flex简明教程,一看就会
- 小程序登陆设计-耐心看,讲的很明白
- C# 生成缩略图方法
- 网络营销的推广方式都有哪些?如何快速获客!
- 微信小程序助力人口普查
- .net Nancy自宿主的使用
- 对话微信小程序产品经理:小商店不意味着腾讯要做电商
- 现在您还需要建网站吗?
- “交管12123”小程序入驻支付宝 首次实现跨省查询
- 电商平台到底要怎么做?
- 直播带货开始降温,淘宝、抖音、快手决战新周期
- 云计算:多云策略的定义和三大优势
- 域名怎么通过实名认证?
- “啤酒”域名Bier.de以114万元登顶Sedo榜!
- 商标是买现成的还是去自己申请?
- 普通企业为何要做分销系统?