微信开发
文章平均质量分 68
微信开发
Hansel.Wn
现在从事软件开发工作.
展开
-
微信小程序开发(九):使用扩展组件库
前端开发中离不开各种组件库,我最先接触的组件库还是Bootstrap,后来工作中又陆续使用了inoic、ng-zorro等各种不同的库。在微信小程序开发中也有多种组件库,这里记录其中几种不同组件库的使用方法。原创 2022-11-17 22:43:53 · 3828 阅读 · 0 评论 -
微信小程序开发(八):page-container弹窗与share-element动画
page-container页面容器,可以在当前页面中弹出一个半屏的弹窗、或者在页面内加载一个全屏的子页面。当page-container组件显示时,用户进行返回操作时会关闭page-container容器,而不会关闭当前页面。每个页面最多只能显示一个page-container,如果在一个页面代码中定义了多个page-container,只有文档流中的第一个page-container能正常显示。属性show:是否显示page-container组件duration:动画时长z-index:默原创 2022-04-09 18:32:06 · 11171 阅读 · 0 评论 -
微信小程序开发(七):movable-area和movable-view
movable-area组件和movable-view组件组合使用,可以实现类似动画效果。movable-area给movable-view划定一个可移动的区域,movable-view是一个可移动的容器,它可以在movable-area划定的区域内拖拽滑动,需要保证movable-view在movable-area组件内部,并且必须是直接子节点。直白点说,movable-view作为movable-area的直接子节点时,可以在movable-area规定的范围内拖拽滑动、缩小放大。movable-原创 2022-04-09 15:41:46 · 8212 阅读 · 5 评论 -
微信小程序开发(六):match-media组件
微信小程序通常都是在移动端使用,如今市面上各种各样的手机、平板等设备屏幕尺寸都不一样,这就会造成同一套代码在不同尺寸的终端上运行时出现各种尺寸适配问题。web开发中我们通常使用媒体查询@media来给不同屏幕设置不同的页面样式,微信小程序官方文档中提供了一个match-media组件,根据屏幕尺寸不同进行不同的内容显示。按照官方文档中来看,主要通过屏幕的宽度和高度尺寸和横屏还是竖屏限制页面match-media组件显示:min-width:设置屏幕最小宽度,小于min-width的屏幕不显示max-原创 2022-04-08 21:21:49 · 991 阅读 · 0 评论 -
微信小程序开发(五):小程序中的事件
在往常的web开发中,“事件”是常用的知识,但是在微信小程序中使用“事件”有很大不同。一个点击事件的例子使用bind在WXML组件中绑定事件,使用data-*绑定事件参数:<button id="btn" data-hi="WeChat" bindtap="testFun"> Click me! </button>Page({ testFun: function(event) { console.log(event) }})id为btn的按钮被点击后,原创 2022-03-30 00:07:13 · 5685 阅读 · 1 评论 -
微信小程序开发(四):小程序的页面跳转与路由
小程序中的路由跳转wx.navigateTo(Object object)1、wx.navigateTo()是最普通的一种路由跳转方法,目标页面可以是除tabbar页面外的其他页面2、使用wx.navigateTo()跳转页面后,当前页面会保存到小程序的页面栈中;可以使用wx.navigateBack方法返回到当前页面wx.reLaunch(Object object)1、跳转到目标url页面2、关闭其他所有页面wx.switchTab(Object object)1、wx.switchTa原创 2022-03-28 23:44:18 · 1772 阅读 · 0 评论 -
微信小程序开发:小程序的本地数据缓存
小程序的本地数据缓存本地数据缓存,指的是把数据存储在当前设备硬盘上,妥善使用本地数据缓存,可以带来良好的用户体验。微信小程序提供了同步和异步两组读写本地数据缓存的接口。读取本地数据wx.getStorage异步读取本地缓存数据,使用success、fail等回调函数处理接口调用情况// 异步读取本地缓存wx.getStorage({ key: 'key1', success: function(res) { // 异步接口在success回调才能拿到返回值 var va原创 2022-03-28 11:04:54 · 8826 阅读 · 0 评论 -
微信小程序开发(三):分包加载
小程序开发完成后,开发者需要将代码包上传到小程序管理后台上线,这时候我们会发现,小程序后台对开发者上传的代码包有严格的大小要求:本地代码超过2M就会限制上传。这种情况下,我们需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户可以在使用时根据实际需要进行加载...原创 2022-03-26 15:42:42 · 5160 阅读 · 0 评论 -
小程序开发报错:本地图片资源真机调试时无法加载
小程序开发报错:本地图片资源真机调试时无法加载使用相对路径加载本地资源作为背景图片,在微信开发工具中进行编译时,图片加载成功<view style="width: 750rpx; height:100vh;background-image:url('../../assets/images/bg2.png');background-size: 100% 100%;"> ...</view>但是在进行真机调试时发现,项目中使用相对路径加载本地图片的地方,全都无法显示。解决方原创 2022-03-22 12:53:05 · 6835 阅读 · 0 评论 -
小程序开发报错:navigateTo:fail can not navigateTo a tabbar page
错误重现:我新创建了一个小程序,项目暂时只有以下几个页面: "pages": [ "pages/index/index", "pages/logs/logs", "pages/home/home" ],同时,我在除了首页的其他页面添加了tabBar, "tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "主页" },原创 2022-03-22 00:30:41 · 879 阅读 · 0 评论 -
微信小程序开发(二):了解小程序运行的基本概念
微信客户端给小程序提供的环境称为宿主环境,小程序借助宿主环境提供的能力,可以完成一些普通网页无法完成的功能。渲染层和逻辑层1、小程序的运行环境分为渲染层和逻辑层,其中WXML和WXSS工作在渲染层,JS脚本工作在逻辑层2、渲染层和逻辑层分别由2个线程管理,渲染层的界面使用WebView进行渲染,逻辑层使用JSCore线程运行JS脚本3、小程序存在多个界面,所以渲染层存在多个WebView线程,渲染层和逻辑层的通信会经由微信客户端做中转,逻辑层发送网络请求也经由微信客户端转发程序与页面小程序运行原创 2022-03-21 16:20:01 · 752 阅读 · 0 评论 -
微信小程序开发(一):小程序代码构成
通过开发工具创建一个项目后,在项目目录中自动生成里四种不同类型的文件JSON配置1、JSON是一种数据格式,在小程序中的作用主要是保存一些静态配置2、JSON文件中不能使用注释小程序配置app.json当前小程序的全局配置,包括小程序的所有页面路径、界面表现、网络超时事件,底部tab等:1、pages字段用于描述当前小程序所有页面路径2、window字段用于定义小程序所有页面的顶部背景颜色、字体颜色等3、tabBar字段用于定义底部tab{ "pages":[ "pages/i原创 2022-03-21 11:37:42 · 7315 阅读 · 0 评论