小程序
fighting Ably!
这个作者很懒,什么都没留下…
展开
-
微信小程序——子组件接收参数变化时如何监听
1. 使用场景当父组件传值给子组件时,有时会出现一开始为空,网络请求或者各种操作之后这个值才真正的传过去<t-activity-sites curPath="{{curPath}}"/>此时,我们在子组件中,若使用该属性来发起网络请求会出现问题,那么我们需要一种情况,在子组件中监听这个属性curPath的变化,当这个值存在时,再发起网络请求2. 实现(使用observer) data:{ currentPath:'', }, properties: { cu原创 2021-07-13 11:51:58 · 2195 阅读 · 2 评论 -
微信小程序——自定义底部tabBar
在小程序开发时,在app.json中配置底部tabBar无法满足我现有的需求,所以准备自己定义一个tabBar.1.app.json中配置"tabBar": { "custom":true, // 支持自定义tabBar "list":[ // 至少包含两个tab信息 { "pagePath": "pages/staffs/staffs", "text": "机构", "iconPath": "./assets/commo原创 2021-07-08 13:10:11 · 2559 阅读 · 0 评论 -
微信小程序——组件的封装(暴露方法出去,在外部调用)
1.应用场景我们在开发时,封装一个公共底部组件,该组件拥有两个部分,第一部分是电话报名,第二部分是表单报名。我们需要在很多页面中使用这个组件,并且电话报名和表单报名逻辑是不同的,只有样式是相同的。此时,我们可以令这个组件暴露出两个方法供外部调用。2.组件封装html文件comp.wxml<!--底部报名表单组件--><view class="tapplyfooter"> <view class="tapplyfooter-left"> ...原创 2021-06-24 17:41:32 · 2990 阅读 · 0 评论 -
微信小程序——IOS对sticky布局的支持,自定义navigation
在小程序开发时有这样一个要求,不用小程序本身的header,而是自己封装一个navigation,令其可以支持图片,文字等任意形式。1.自定义navigation我们可以在要求的页面的json文件中{ "navigationStyle":"custom", // 支持自定义navigation}2.封装组件header<view class="theader my-class"> <view class="theader-right" catchtap="toCh原创 2021-06-21 15:12:30 · 817 阅读 · 0 评论 -
微信小程序——子组件给父组件传值
使用场景当子组件选中状态改变时,父组件实时收到子组件修改后的选中状态值第一步:在父组件中绑定事件// 父组件 wxml 中 子组件为 t-phone-first<t-phone-first bind:checkedagree="onCheckedAgree" content="{{firstGroup}}"/>绑定bind:checkedagree事件,并且在js中定义onCheckedAgree// 父组件 js中 onCheckedAgree:async function原创 2021-05-31 11:25:35 · 1941 阅读 · 0 评论 -
微信小程序——:nth-child等在小程序中使用
Vue中,父组件列表引入每一个子组件元素的时候,可以在父组件的CSS文件中设置子组件的margin,可以通过样式穿透在父组件设置子组件:nth-child(2n)为0等,那么在小程序中是如何实现的呢?父组件:WXML <view class="getnotice-list"> <t-notice-item class="getnotice-list-item" wx:for="{{getnotice}}" wx:key="index" content="{{item}}"原创 2021-05-27 16:17:35 · 4163 阅读 · 0 评论 -
微信小程序——外部样式类-父组件修改子组件样式
在开发的过程中,我定义了一个公共组件,但在我的设计稿上面,这个公共组件距离内容的margin-bottom是不同的,所以我需要在父组件引用这个组件的时候,在父组件的css中设置他的样式,查阅小程序文档,找到了外部样式,使用方式如下:子组件定义被外部使用类子组件wxml:wxml中定义将要被外部使用的class名称 my-class<view class="activityPrivilege my-class"> <image class="activityPrivilege-原创 2021-05-26 10:19:18 · 2966 阅读 · 0 评论 -
微信小程序——事件传递参数、页面跳转传递参数、组件传值
当我们在xxx.wxml页面中,给某个位置绑定事件并想传值时,例如:我们在循环一组元素,每个元素的id是不同的,点击不同元素,根据不同id,请求不同的详细信息这时,我们需要这样做:xxx.wxml中: <view class="activity-item" wx:for="{{activityList}}" wx:key="index" data-id="{{item.id}}" // 将id 传过去 bindtap="toActivity原创 2021-05-25 14:48:39 · 1197 阅读 · 0 评论 -
微信小程序——报错TypeError: Cannot read property ‘mark‘ of undefined
文章来源选中增强编译后就好了,原因为基础库版本太高了解决操作:总结用法,希望可以帮助到你,我是Ably,你无须超越谁,只要超越昨天的自己就好~转载 2021-05-25 13:30:53 · 2109 阅读 · 0 评论 -
微信小程序——公共组件tabbar设置
小程序的全局配置中,有专门的tabbar选项,可以用它配置公共的tabbar,个数限制为2~5app.json中定义,与window同级处有tabBar选项 "tabBar":{ "color":"#999999", // 文字颜色 "selectedColor":"#1990FF", // 选中时文字颜色 "position":"bottom", // 位置,只可以选择top或bottom "list": [ // tab列表 {原创 2021-05-25 11:46:39 · 977 阅读 · 0 评论 -
微信小程序-gitignore文件
为了避免在代码上传至git上时,将无需上传的代码提交,需要增加一个.gitignore文件,将无需上传的文件/文件夹罗列出来# 避免提交的文件夹miniprogram_npmnode_modules.vscode# 避免提交的文件yarn.lockyarn-error.lock...原创 2021-05-25 10:26:42 · 3275 阅读 · 0 评论 -
微信小程序——组件引用报错
SystemError (jsEnginScriptError)Component is not found in path “component/common/Tfooter/Tfooter” (using by “pages/index/index”)Error: Component is not found in path “component/common/Tfooter/Tfooter” (using by “pages/index/index”)开发时遇到这个问题,引用组件的时候报错这个原创 2020-10-26 14:01:15 · 1933 阅读 · 0 评论 -
微信小程序——地图定位点marker
微信开放文档map微信开放文档地图相关API一、目标实现显示部分地图,并在想要位置进行标点定位二、实现过程1.在页面wxml文件中绘制一个地图 <view class="schools-map"> <map id="myMap" scale="15" // 缩放级别 latitude="{{latitude}}" // 当前纬度 longitude="{{longitude}}" // 当前经度原创 2020-10-26 10:26:41 · 4437 阅读 · 14 评论 -
微信小程序——主页无法访问globalData中数据
解决办法:来源:https://www.cnblogs.com/jiangtengteng/p/10837659.html点我直接去该网页转载 2020-10-23 13:38:45 · 921 阅读 · 0 评论 -
微信小程序——样式覆盖
在我们引入组件时,小程序无法通过增加类名等方式对样式进行覆盖,查阅资料,我们可以这样做:以开发中的一个实例为例:自定义一个组件 Tfooter.wxml其中有一个类,一会我想要对其中的样式进行覆盖,如果覆盖后,之前所有的样式都不再生效<view class="blank" />在Tfooter组件中,我想要覆盖的类名为blank在对应的js文件中,将该类名暴露出去Tfooter.js 中Component({ externalClasses:['blank'], /原创 2020-10-19 16:23:44 · 2507 阅读 · 0 评论 -
微信小程序——在小程序中实现过滤函数
在Vue中我们可以使用filter函数来实现管道过滤器,那么在小程序中是如何实现的呢?我使用过滤器的原因是,不想写在本page的js里面,这样在其他page想要用这个方法的时候,就要再次定义一次,成本太高。所以想写在一个公共的文件中,当哪个页面想要使用这个方法时,可以直接引入使用,像Vue中一样。查看微信开放文档,发现了一个wxs文件,接下来的实例,是使用wxs文件来实现对距离进行格式化的方法:第一步:创建wxs方法在utils文件夹下,新建filter.wxs文件utils/filter.wxs原创 2020-10-18 15:27:42 · 895 阅读 · 0 评论 -
微信小程序——参数传递(父传子)
小程序的传参方式与Vue有所不同:页面写法:传参实例:cities.wxml文件<view> <van-index-bar index-list="{{ categories }}"> <view wx:for="{{citiesList}}" wx:for-item="i" wx:key="index"> <van-index-anchor index="{{i.label}}"/> <van-cell bindtap="原创 2020-10-15 14:35:53 · 840 阅读 · 0 评论 -
微信小程序——自定义组件[按需求封装组件]
当我们在开发过程中,会遇到组件封装的问题。在微信小程序中,你可以这样做:第一步:新建component文件夹component文件夹与pages同级第二步:新建组件你可以给组件命名为 TSwiper,这样你就需要在component文件夹下新建TSwiper文件夹,然后右键单击文件夹,选择新建Component第三步:完善组件中内容新建的component中和pages一样,可以写wxml、js功能、样式等第四步:在需要的页面中引入如果你需要在主页中引入,你就可以在index.json中原创 2020-10-15 10:35:45 · 607 阅读 · 1 评论 -
微信小程序——区分生产和开发环境
在封装网络请求时,对于不同的环境要调用接口的baseUrl是不相同的,在小程序中,我是这样设置的:// request.js const envVersion = __wxConfig.envVersion;let baseUrl;if(envVersion === 'develop'){ baseUrl = 'https://xxx.xxx.cn/;}else{ baseUrl = 'https://xxx.xxx..com/';}我们可以在这里根据当前的环境进行相应接口的调用。原创 2020-10-13 10:40:24 · 2124 阅读 · 0 评论 -
微信开发者工具——支持less的插件
之前在网上看了很多让小程序中支持Sass或者less的插件,但都是通过vsCode的,最近发现一篇好文章,分享给大家:猛戳链接开始学习在按照这个流程配置时,可能会出现迟缓的情况,建议重新启动开发者工具。最喜欢这个作者的一个思路是,通过vscode安装这个插件,然后去扩展中找到这个文件,直接放在编辑器自定义扩展,优秀优秀,学到啦~自己的留存,希望可以帮助到更多的人,在这条路上,你不是一个人在战斗!...转载 2020-10-12 11:53:39 · 1439 阅读 · 1 评论 -
微信小程序——获取当前人微信绑定的手机号码
做小程序项目时有一个需求,是点击某个按钮,之后要获取该微信绑定的手机号码,1.第一步:写出页面<!--index.wxml--><view class="container"> <van-button type="info" bindtap="getPhoneNum">点击获取电话号码</van-button></view>2.第二步:在js中获取电话号码在页面对应的js中写上getPhoneNum方法2.1 获取微信用户绑定的手原创 2020-10-12 10:26:07 · 14790 阅读 · 13 评论 -
微信小程序——初始化(二)全局封装网络请求
网络请求1.第一步:安装axiosyarn add axios2.第二步:npm构建老规矩 工具—>构建npm 每次安装新花样的时候,都需要构建或者统一构建哦3.第三步:封装请求全局封装请求,所以要写在app.js文件中3.1 设置全局请求的base_urlapp.js中有一个globalData可以被全局访问到,我们可以将url设置在其中。3.2 封装使用时需要的网络请求...原创 2020-10-12 10:19:03 · 366 阅读 · 0 评论 -
微信小程序——定位(根据经纬度算距离)
我们获取到经纬度信息后,如何将其转换为距离当前xxkm这种状态呢?计算距离的js是这个优秀的前辈写的在js文件中,我们可以定义两个方法:方法第一步:将经纬度转换为弧度radrad (d) { return d * Math.PI / 180.0; },方法第二步:进行计算 getDistance(lat1, lng1, lat2, lng2) { var radLat1 = this.rad(lat1); var radLat2 = this.rad(lat2);原创 2020-10-10 16:51:52 · 4915 阅读 · 0 评论 -
微信小程序——定位(获取当前的经纬度信息)
在做小程序的时候需要用到定位相关的功能,为了实现这一功能,官方文档给出了如下解决办法:文档API中位置模块下面有如下方法:wx.getLocation() 获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。找到方法后,寻找一个页面,在页面onLoad时调用该方法,获取地理位置信息使用这个方法时,我们可以看到左边view层显示我们要在app.json中原创 2020-10-10 15:47:09 · 8164 阅读 · 1 评论 -
微信小程序——初始化(三)项目目录介绍
项目目录1.官网介绍全局配置、全局数据、全局样式分别在app.json/app.js/app.wxss中进行配置pages文件夹相当于vue中的view,可以用来存放页面,pages里面的每一个文件夹都包含该文件的wxml、wxss、json、js文件,用于单独对该页面进行配置。node_modules 我们所安装的所有依赖,将会在node_modules中存在,构建npm后进入miniprogram_npm文件夹中。package.json中的dependencies中记录了安装依赖的版本,当原创 2020-10-10 13:07:25 · 417 阅读 · 0 评论 -
微信小程序——初始化(一)引入组件库
初始化1.第一步:创建项目打开微信开发者工具,按照需求选择目录,输入申请的AppID,之后新建2.第二步:npm初始化package.json文件夹如果该项目中没有package.json文件,可以npm init -y自动生成一个。3.第三步:按需引入想要引入的组件库开发时,我想要使用vant组件库,根据官网提示,在小程序中安vant组件库npm i @vant/weapp -S --production安装后会生成一个node_modules文件夹4. 第四步:本地设置在详情下原创 2020-10-10 11:29:20 · 1976 阅读 · 2 评论