![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
iChangebaobao
菜鸟的前端进击之路
展开
-
[微信小程序] 微信小程序使用特殊字体
methods: { onLoad() { this.loadFontFace() }, loadFontFace() { wx.loadFontFace({ family: 'Bebas', source: 'url("https://cloud-minapp-37887.cloud.ifanrusercontent.com/1mdOQVZ9eaLtmlUt.ttf")', fail: console.log, .原创 2022-02-23 11:31:35 · 1020 阅读 · 0 评论 -
[微信小程序] wx.navigateBack 返回上一页面传参
微信小程序 wx.navigateBack 返回上一页面传参直接调用上一页setData let pages = getCurrentPages(); // 当前页, let prevPage = pages[pages.length - 2]; // 上一页 prevPage.setData({ subPageResult: "我是结果", }) wx.navigateBack({ //返回 delta: 1 })使用 wxStoragewx.se原创 2021-12-13 18:45:37 · 419 阅读 · 6 评论 -
[微信小程序]在 wxml 文件中不能使用 Array.includes 方法问题
由于wxml里的模板支持的语法有限,在 wxml 文件中不能使用 Array.includes 方法,详情可以参考 微信官方文档解决方法:在wxs 中写一个方法<wxs module="tools"> var includes = function (array, searchElement) { return array.indexOf(searchElement) !== -1 } module.exports = { includes:includes原创 2021-12-01 11:58:58 · 4253 阅读 · 0 评论 -
[微信小程序] 校验表单,滑动到不合格的具体表单项
[微信小程序] 校验表单,滑动到不合格的具体表单项一、具体需求二、实现思路一、具体需求产品提出校验表单时,填写不符合校验规则的,表单项 label 高亮,页面滑动定位到该表单项二、实现思路在校验表单函数,除了wx.showToast()提示用户外,使用wx.pageScrollTo 将页面滚动到目标位置,该API支持选择器和滚动距离两种方式定位,官方文档点我首先要在 input-field 给具体的 id,这个id 根据表单项的具体位置决定,这里写的是比如这里是上线时间 published_at未原创 2021-08-26 17:56:47 · 405 阅读 · 0 评论 -
[微信小程序]微信小程序使用slot踩坑
微信小程序使用slot踩坑转载 2021-04-30 09:52:55 · 1177 阅读 · 0 评论 -
[微信小程序]微信小程序发布新版本时自动提示用户更新的方法
微信小程序发布新版本时自动提示用户更新的方法转载 2021-02-01 18:16:28 · 1285 阅读 · 0 评论 -
[微信小程序]抽奖、水果机营销组件
小程序营销组件, Marketing components for WeChatApp原创 2020-12-31 15:50:50 · 854 阅读 · 0 评论 -
[微信小程序]微信小程序学习(九)——小程序的第三方框架
项目视频项目文档原创 2020-12-31 10:43:13 · 170 阅读 · 0 评论 -
[微信小程序]在微信小程序使用computed属性
在微信小程序里使用computedwxComputed在微信小程序开发中加入了computed自动计算属性的支持,此项目主要参考了Vue.js的依赖收集逻辑,数据变化后的视图更新操作则是通过小程序内部的Page.prototype.setData原型函数来完成。构建打包使用rollup进行构建安装依赖,npm install运行打包命令,npm run build,在dist目录下生成打包文件使用例子将打包后的wxComputed.min.js文件放在lib目录中,在需要用到的页面中引入或使转载 2020-11-27 09:35:48 · 4635 阅读 · 3 评论 -
[微信小程序]获取用户当前位置信息
按照以下步骤去做微信官网下载qqmap-wx-jssdk.js文件 getLocation(){ // 获取当前地址经纬度 var that=this; // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope wx.getSetting({ success:res=> { if (!res.authSetting['scope.userLocation']) {原创 2020-11-05 17:08:12 · 901 阅读 · 0 评论 -
[微信小程序]小程序生成图片或者生成海报功能、canvas画图
https://www.kancloud.cn/my_love1/wx_poster/1688892https://blog.csdn.net/weixin_41000111/article/details/106139770?fps=1&locationNum=2原创 2020-09-21 18:16:31 · 457 阅读 · 0 评论 -
[uni-app]uni-app项目结构及一些坑
uni-app项目结构需要注意的是:static目录下的js文件不会被编译,如果里面有es6的代码,不经过转换直接运行,在手机上会报错。建议在static目录下不要放一些css、less/scss等的资源文件,可以将其放在专门建的公共样式文件目录中。二、资源路径说明1.模板内引入静态资源在template标签内引入static目录下的静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径。例如:绝对路径<image class=”logo”src=”/s转载 2020-09-07 08:48:23 · 1342 阅读 · 0 评论 -
[Vue] class绑定、 style绑定背景图片
1.用url 引入图片2.用背景色:style="{'background': item.bgcolor}"<!--这里的 item.bgcolor 是循环 list 里的对应的bgcolor,bgcolor:"#000"-->原创 2019-09-02 10:26:55 · 3059 阅读 · 0 评论 -
[微信小程序]微信小程序本地图片上传(base64)
https://blog.csdn.net/weixin_43951315/article/details/104922335原创 2020-08-13 17:25:58 · 1699 阅读 · 0 评论 -
[微信小程序]滚动到底部,弹出键盘会导致input上移问题
原文:滚动到底部,弹出键盘会导致input上移把textarea当作input用,textarea有fixed属性,但是不能只使用数字键盘,只输入数字原创 2020-08-10 09:42:16 · 1479 阅读 · 0 评论 -
[微信小程序]微信小程序实现“图片压缩”小功能
微信小程序实现“图片压缩”小功能转载 2020-07-13 08:17:05 · 7488 阅读 · 1 评论 -
[微信小程序]wx.createSelectorQuery()获取页面或组件中界面上的节点信息
1、 官网例子----wx.createSelectorQuery()微信小程序-wx.createSelectorQuery()——获取页面中界面上的节点信息上的是在Page中获取的const query = wx.createSelectorQuery()query.select('#the-id').boundingClientRect()query.selectViewport().scrollOffset()query.exec(function(res){ res[0].top原创 2020-07-10 17:55:42 · 21452 阅读 · 2 评论 -
[微信小程序] JS 方法、类的导出和导入
微信小程序JS导出和导入1. 导出1.1 方法和变量导出(写在被导出方法和变量的js文件)module.exports = { variable: value, method : methodName}1.2 class导出(es6语法)class HomeModule { constructor(url) { this.url = url; }}export { HomeModule }2. 导入2.1 方法和变量的引入(写在需要引入其他js的方法或变量的J转载 2020-07-03 10:59:30 · 2044 阅读 · 0 评论 -
[微信小程序] this.setData()修改数据的各个类型属性值(对象、数组、字符串。。。)
page({ data:{ s1:{a:"",b:"b"} }, changeData:function(e){ var cData=this.data.s1; cData.a="1";//先修改json值 this.setData({ //再set值 s1:cData }) } })这种this.setData()的方式性能体验差开发微信小程序时,使用setData修改data中数据时,针对各种情况的解决方案如下:转载 2020-06-10 16:05:36 · 1963 阅读 · 1 评论 -
[微信小程序]小程序引入腾讯地图选点插件出现:未取得授权
问题:小程序引入腾讯地图选点插件出现:未取得授权首先在微信小程序引入腾讯地图选点插件有官方文档1、微信小程序接入腾讯地图服务,申请Key2、在 app.json 中添加 "plugins": { "chooseLocation": { "version": "1.0.3", "provider": "wx76a9a06e5b4e693e" } }, "permission": { "scope.userLocation": { "d原创 2020-06-10 11:54:20 · 6053 阅读 · 10 评论 -
[微信小程序]如何在微信小程序内实现骨架屏效果
如何在微信小程序内实现骨架屏效果https://gitee.com/minchangyong/skeletons原创 2020-05-21 12:12:03 · 879 阅读 · 0 评论 -
[前端面试] 微信小程序相关面试题
https://mp.weixin.qq.com/s/s5OpbdMgjH-2gyV-b36QQA原创 2020-05-21 11:50:30 · 1874 阅读 · 0 评论 -
[微信小程序] 自定义modal弹窗组件
关于微信小程序 modal弹框组件的介绍微信小程序 自定义modal弹窗组件原创 2020-05-18 09:37:25 · 1293 阅读 · 0 评论 -
[微信小程序]微信小程序学习(八)——微信小程序内联H5页面——web-view组件
web-view组件简单使用1. web-wiew官方文档2. 使用web-view组件,需要在微信公众平台配置好业务域名,下载校验文件放在服务器中,确保能通过域名/文件.txt 进行访问3. 建议新建一个页面,里面只有web-view 组件官方文档:承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。pages/baidu/baidu.wxml<web-view src="https://www.baidu.com/"> </web-view原创 2020-05-14 15:24:10 · 471 阅读 · 0 评论 -
[微信小程序]日期时间格式化封装Util、ios系统上显示为NaN问题
DateFormat.jsconst formatNumber = n => { // 小于10的加0 n = n.toString() return n[1] ? n : '0' + n}const formatDate = date => { const year = date.getFullYear()//年 const month = date.getMonth() + 1//月 const day = date.getDate()//日 // ret原创 2020-05-08 18:10:13 · 825 阅读 · 0 评论 -
[微信小程序]微信小程序学习(七)——跳转wx.navigateTo(), wx.redirectTo(),wx.switchTab() 等使用
一、 wx.switchTab(Object object)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面wx.switchTab({ url: '/index'})二、 wx.redirectTo(Object object)关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。wx.redirectTo({ url: 'tes...原创 2020-04-30 11:17:05 · 696 阅读 · 0 评论 -
[uni-app] uni-app封装自己的异步请求
1. 根目录新建一个文件夹Utils,新建request.js// es6 promise 微信小程序api的铺垫 export default(params)=>{ uni.showLoading({ title:"加载中", }); return new Promise((resolve,reject)=>{ wx....原创 2020-04-29 09:41:50 · 628 阅读 · 0 评论 -
[uni-app]运行uni-app报错:sitemap.json Error: 未找到入口 sitemap.json 文件
运行uni-app报错:sitemap.json Error: 未找到入口 sitemap.json 文件解决方案:1、在dist根目录下添加一个sitemap.json 文件2、打开dist/dev/mp-weixin/sitemap.json文件将如下代码复制进去:{“rules”:[{“action”: “allow”,“page”: “path/to/page”,“par...原创 2020-04-26 18:32:21 · 5449 阅读 · 2 评论 -
[微信小程序] uni-app 基础语法学习(三)
微信小程序常用 UI 框架 :vantVant官网: https://youzan.github.io/vant-weapp/#/quickstartColorUIGitHub地址:https://github.com/weilanwl/ColorUI作者网站:https://www.color-ui.com/H5在线预览:http://demo.color-ui.co...原创 2020-04-26 12:14:42 · 293 阅读 · 0 评论 -
[微信小程序] uni-app 基础语法学习(二)
想要在子组件中动态添加标签1、在父组件中引入子组件的标签<my-form></my-form>中编写内容2、在子组件中放一个占位符<slot></slot>原创 2020-04-26 10:54:45 · 172 阅读 · 0 评论 -
[微信小程序] uni-app 基础语法学习(一)
原创 2020-04-24 12:15:18 · 241 阅读 · 0 评论 -
[微信小程序]picker组件关于objectArray数据类型的绑定方法
https://www.jb51.net/article/157716.htm转载 2020-04-22 09:19:27 · 522 阅读 · 0 评论 -
[微信小程序] 自定义评分组件
一、微信小程序——评分index.wxml <view> <image wx:for="{{stars}}" wx:key="id" src="{{item.src}}" data-clickIndex="{{item.id}}" bindtap="rating" style...原创 2020-04-21 10:43:50 · 1051 阅读 · 0 评论 -
[微信小程序] 原生小程序picker组件实现时间日期的选择
微信小程序之picker选择器实现时间日期的选择转载 2020-04-20 11:32:25 · 8365 阅读 · 1 评论 -
[微信小程序]微信小程序学习(六)——App、page、component生命周期
App(Object object)注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。App({ onLaunch (options) { // 小程序初始化完成时触发,全局只触发一次。 }, onShow (options) { // 小程序启动...原创 2020-04-19 22:22:18 · 445 阅读 · 0 评论 -
[微信小程序]微信小程序学习(五)——自定义组件,父子组件传递数据
一、创建组件在根目录新建文件夹 components,在微信开发者工具中,在文件夹 components上点击右键,选择新建Component,创建组件。为了方便区分组件,建议在 components下用文件夹myHeader存放所有文件,用来区别多个组件二、使用组件例如:在页面 index 中使用//index.json"usingComponents": { "myH...原创 2020-04-19 16:08:40 · 324 阅读 · 0 评论 -
[微信小程序] 微信小程序学习(四)——button的开放能力
原创 2020-04-19 14:47:06 · 242 阅读 · 0 评论 -
[微信小程序] 微信小程序学习(三)——navigator的使用
navigator 相当于 a 标签,可以实现页面的跳转。原创 2020-04-19 14:31:49 · 964 阅读 · 0 评论 -
[微信小程序] 微信小程序学习(二)——swiper的使用
1. wxss的尺寸单位 rpxrpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。例如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。建议:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。导入样式:@im...原创 2020-04-19 14:20:04 · 243 阅读 · 0 评论 -
[微信小程序] 微信小程序学习(一)——起步
1. 完成注册登录在微信公众平台注册小程序,完成注册后得到APPID,可以同步进行信息完善和开发。2. 下载开发工具根据计算机系统,下载 微信web开发者工具3. 新建项目结构传统结构微信小程序结构HTMLWXML样式CSSWXSS逻辑JavaScriptJavaScript配置无JSON传统的web是三层结构,而微信小程序是...原创 2020-04-19 12:28:24 · 347 阅读 · 0 评论