微信小程序
camellias_
这个作者很懒,什么都没留下…
展开
-
小程序(二十六)微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的)。两种方法,各有各的优缺点。一:使用小程序内置标签rich-text这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑的是什么样子,小程序端显示的也是什么样子。示例:Html<view class="container"> <view class="page-body"> <view class="page-section"> <view class="p原创 2022-01-13 16:55:18 · 11874 阅读 · 0 评论 -
小程序(二十五)微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) { console.log(e); const that = this wx.chooseImage({ count: 1, success: function (res) { console.log(res); that.editorCtx.insertImage({ src: res.tempF原创 2021-09-26 16:59:16 · 2155 阅读 · 0 评论 -
小程序(二十四)微信小程序富文本编辑器editor
小程序也是有富文本编辑器这个控件的,别说,之前我还真没注意。官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/editor.html官方文档中给出的东西倒是不多,具体的代码示例在下图红框中标注的位置:示例代码大概是这个样子:通过官方的示例,我这边大概了解了一下微信小程序editor的使用,我这里封装了一个自定义组件:效果如下图所示:资源下载请访问:https://guanchao.site/pc/articl原创 2021-09-18 09:28:14 · 1829 阅读 · 0 评论 -
小程序(二十三)微信小程序左上角返回按钮触发事件
微信并没有为我们提供左上角返回上一页触发的事件。但是有的时候这个操作我们还是需要监听一下。下图红框标注的返回上一页按钮。最后实现的效果:点击返回上一页的时候,我需要重新加载上一页的数据:返回上一页按钮只会触发上一页的onShow生命周期函数,并不会触发onLoad函数。因此我们需要在onShow函数中做一些设置:大概是操作流程,从日程页跳转至实验列表页,再点击实验列表页 左上角的返回键,返回日程页重新获取页面数据。我这里直接上代码:实验列表页代码:onShow: function ()原创 2021-08-04 16:23:54 · 12210 阅读 · 6 评论 -
小程序(二十二)子组件调用父组件方法,父组件调用子组件方法
制作了一个自定义组件,底部弹出菜单。显示这个菜单的时候,首先,父组件需要调用子组件的方法,显示子组件。点击子组件的菜单,需要调用父组件的方法进行逻辑处理。1:组件代码如下:popup.wxml<!--components/popup/popup.wxml--><view class="half-screen"> <!--屏幕背景变暗的背景 --> <view class="background_screen" bindtap="hideModa原创 2020-12-11 16:13:01 · 1818 阅读 · 1 评论 -
小程序(二十一)小程序登录获取openid和unionid
在微信小程序中,因为各种各样的原因我们会需要获取到用户的openid或者unionid下面就简单来讲一下在小程序中如何获取openid和unionid。步骤一:微信登录获取登录凭证wx.login({ success: res => { // 微信临时登录凭证 let _code = res.code; // 进行网络访问,将 _code 提交给服务端,服务端返回 openid 和 unionid, // 服务端对 _code 的处理机制参照 步骤二 .原创 2020-10-28 18:07:30 · 1307 阅读 · 0 评论 -
小程序(二十)小程序转发
微信小程序默认是没有转发和分享功能的。这个要注意。我之前一直给其他人分享的时候一直都是用的二维码,那天突然想起来,这个玩意应该有转发的功能吧。试了一下,我还真没有。这里大概记录一下转发的代码:转发的函数,其实在创建文件的时候(用微信开发者工具创建)已经生成好了。代码如下:/** * 用户点击右上角分享 */ onShareAppMessage: function (options) {var self = this;// 获取当前页面链接 var pages = get原创 2020-10-27 16:02:35 · 654 阅读 · 0 评论 -
小程序(十九)utils文件的使用
想封装一些公共函数文件,这个其实放到哪里都可以,app.js等等但是,本着专用的原则,我们还是使用小程序为我们提供的公共代码的存放模块utils/utils.js,当然,你还可以在这个目录下边新建其他的文件,但是用法大同小异。首先要注意一个问题,utils是一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。所以当你在util.js里封装的方法想要在外部使用的话,必须通过 module.exports 或者 exports 对外暴露module.expor原创 2020-10-23 16:11:03 · 6134 阅读 · 0 评论 -
小程序(十八)小程序维护登录态
现阶段小程序系列的最后一篇。我们来看下小程序十如何维护登录态的,这个玩意,早应该说了,但是,直到我小程序做成现在这个状态,我也没有用到微信官方所说的使用sessionkey维护的登录态,所以,这个最后来看一下。一:何为登录态?所谓登录态,就是程序在运行时,能够识别当前用户,能够证明自己的唯一性且合法。我们知道,WEB服务器通过浏览器携带的cookie获取session来判断是否是同一用户(或浏览器);Restful服务通过客户端传过来唯一ID,来识别调用用户。放一张从网上下载的图片:二:使用s原创 2020-10-22 13:46:11 · 484 阅读 · 0 评论 -
小程序(十七)小程序监听返回键跳转事件(安卓返回也适用)
做用户信息授权的时候,我是通过调授权页面,让用户点击授权按钮来实现用户授权。但是,小程序有自带返回键,还有安卓手机自带返回键。这个当初做的时候没有想到,天真了。解决方案是使用onUnload 监听页面卸载之后发生的事情onUnload:function(){ wx.redirectTo({ url: '../index/index' }) wx.navigateTo({ url: '../index/index' }) wx.switch原创 2020-10-21 15:55:24 · 5054 阅读 · 0 评论 -
小程序(十六)小程序仿微信聊天页面及功能
后期打算在小程序中添加即时聊天的功能,但是目前这个还没有考虑好以一种什么样的形势去实现,先接入一个腾讯AI提供的免费闲聊接口。先做一个大概的页面及功能。腾讯AI地址:https://ai.qq.com/doc/nlpchat.shtml#基础闲聊接口有兴趣,可以试一试,当然,这种免费且不限次数的机器人肯定不会太聪明,期望值别太高。我这里实现的效果是,可以发文字,表情,图片以及语音,,当然如果你还想要更多的功能,就需要自己去拓展了。最后的效果:其余的就不多介绍了,感兴趣的同学可以自行研究下代码:原创 2020-10-13 14:50:43 · 5266 阅读 · 10 评论 -
小程序(十五)小程序回到顶部
程序回到顶部的原理和web网站的原理是一样的,都是通过滚动条的位置来判断。关于web网站的回到顶部设置,请移步《JavaScript实现网页带动画返回顶部》废话不多说,直接上代码:Index.wxml<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />这个就一行代码,放哪都行。Index.wxss.go_top{ position: fixed; b原创 2020-10-12 11:15:50 · 236 阅读 · 0 评论 -
小程序(十四)小程序自定义弹窗组件
上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件。首先,放一下,最终的效果图:这是我们最后要实现的效果:那么,首先,我们创建一个组件:新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wxss、wxml、json、js,如图剩下的,就是不废话了,上代码:一:编写组件代码:Dialog.wx原创 2020-10-10 14:36:05 · 2958 阅读 · 1 评论 -
小程序(十三)小程序弹窗wx.showToast及wx.showModal
我这版的小程序中,没有使用到确定取消那样的弹窗,基本上用到的就是,加载中,成功或者失败那种消息提示类的弹窗。微信本身给我们提供了一个这样的弹窗wx.showToast(Object object),挺好用的,我也没有再去折腾第三方组件的消息提醒弹窗。Object object这些事官方给出的参数。注意,icon设置为none的时候,就是没有图标纯文字的状态,这个就很好了。这个玩意既能有图标,又能没有图标,百变小能手啊。注意一下,自定义显示图标不能是动图,他这是只加载图片的第一帧,所以,动图是原创 2020-10-09 11:56:31 · 1329 阅读 · 0 评论 -
小程序(十二)小程序页面跳转及传参
Bindtap传参的问题解决了,那么跳页的时候,也需要传递参数,毕竟,从文章列表页,跳到文章详情页,是需要文章id的。小程序这部分到是提供了不少的方法,大概整理了一下。微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转。为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式。1.wx.navigateTo(OBJECT)保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。wx.navigat原创 2020-09-30 16:10:40 · 470 阅读 · 0 评论 -
小程序(十一)小程序bindtap传参
文章列表页跳文章详情页的时候,我发现了一个问题,bindtap绑定的事件不能直接写:bindtap=jumpToArticle(item.id);这样写不行,会报错:VM2760:1 Component “pages/index/index” does not have a method “jumpToArticle(item.id)” to handle event “tap”.那么我需要传参怎么办呢,官方是这样定义的。bindtap只是写明函数名,例如,bindtap=‘setNumber’,而原创 2020-09-30 16:06:56 · 12370 阅读 · 0 评论 -
小程序(十)小程序缓存
文章列表页跳文章详情页的时候,我发现了一个问题,bindtap绑定的事件不能直接写:`bindtap=jumpToArticle(item.id);`这样写不行,会报错:VM2760:1 Component "pages/index/index" does not have a method "jumpToArticle(item.id)" to handle event "tap".那么我需要传参怎么办呢,官方是这样定义的。bindtap只是写明函数名,例如,bindtap=‘setNumb原创 2020-09-29 14:38:56 · 4210 阅读 · 0 评论 -
小程序(九)小程序实现下拉刷新
下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页……我这里还是用在首页,上拉分页,下拉刷新重载分页。我就是这么做的。下拉刷新和上拉分页还是有区别的。下拉刷新需要在index.json中添加属性:"enablePullDownRefresh": trueIndex.jsPage({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 20, //页原创 2020-09-29 09:03:42 · 215 阅读 · 0 评论 -
小程序(八)小程序实现上拉分页
文章列表需要做分页了,但是吧,肯定不能是想web网站那样做一串数字页码那样了,这是反人类的设计。小程序为我们提供了上拉加载事件:onPullDownRefresh /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { },对,就是这个玩意。这个直接就能触发,不需要其他什么多余的设置,下边我分享一下,我上拉分页的代码。Index.jsPage({ data: { // 文章数组原创 2020-09-29 09:02:34 · 598 阅读 · 2 评论 -
小程序(七)小程序时间轴组件
我这里的标题是小程序的时间组件,其实我这里是将他写成了一个页面,当然,如果你有需求,将其做成一个自定义组件也可以~这玩意其实没有什么技术难点就是一个小页面,我这里就不赘述了。直接上代码:Remark.wxml:<view class="listview-container margin_bottom"> <block wx:for="{{newList}}" wx:key="index"> <view class="playlog-item" >原创 2020-09-28 14:42:20 · 3030 阅读 · 0 评论 -
小程序(六)小程序获取用户信息
小程序获取用户信息这部分其实不难,但是,他有点麻烦。最开始,在小程序的app.js中的onlaunch中判断如果当前登录用户,数据库中没有用户信息,则直接调用wx.getUserInfo,弹窗获取用户信息。但是小程序改版之后,不支持这种调用方式,官方给出的demo是使用一个button按钮来调起wx.getUserInfo这个方法来获取用户信息。用习惯了弹窗的我,突然碰到这种方式还有点不习惯,那玩意就一个按钮,用户岂不是点不点都行了?后来一寻思,这不死心眼了么,弹窗改按钮,其实道理上是一样的。弹窗原创 2020-09-28 13:44:39 · 1119 阅读 · 0 评论 -
小程序(五)小程序登录、注册
小程序理论上和VUE是差不多的,我在做VUE的登录注册的时候,用户信息使用服务器端的session存了一份,还使用前端的缓存存了一份。小程序这边我可能不需要这么麻烦,只用小程序的缓存将用户信息存一份大概就可以了。我这里大概是这样实现。首先,在你创建小程序的时候,示例就会告诉你小程序的登录是在app.js的onlaunch中实现的,在小程序的生命周期中,我们了解onlaunch全局只调用一次。因此,小程序的登录也是在小程序生成结束之后,只调用一次,而且这个玩意,他是在后台进行的,不会弹窗。这就很完美了。原创 2020-09-28 13:41:09 · 556 阅读 · 0 评论 -
小程序(四)小程序生命周期
小程序的生命周期说白了就是指程序从创建、到开始、暂停、唤起、停止、卸载的过程。我们大概从三个角度看一下小程序的生命周期。(1):应用生命周期(2):页面生命周期(3):应用生命周期影响页面生命周期一:应用生命周期放一张从网上找的图:1:用户首次打开小程序,触发 onLaunch(全局只触发一次)。:2:小程序初始化完成后,触发onShow方法,监听小程序显示。3:小程序从前台进入后台,触发 onHide方法。:4:小程序从后台进入前台显示,触发 onShow方法。5:小程序后台运行一原创 2020-09-26 15:28:42 · 15858 阅读 · 0 评论 -
小程序(三)配置tabbar及自定义tabbar样式
关于tabbar部分,官方文档是有明确的说明的,当然,我这里是不存在把官方文档给你复制一遍的情况。我大概把我再看官方文档过程中遇到的坑,大概复述一下。一:配置tabbar这个主要是使用小程序自带的tabbar,在项目根目录下的app.json中配置,这个简单配置一下就可以了。这里放一下我的app.json配置:{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/article/article",原创 2020-09-26 15:21:16 · 31742 阅读 · 10 评论 -
小程序(二)使用npm安装weui
作为一个不专业的前端,在开发前端的时候我喜欢用一些UI库。HTML页面一般习惯用bootstarp,layui等。VUE项目一般习惯用iview,elementui等。小程序自然也不例外,我这里使用的是官方推荐的weui组件库,但是如何将其引入项目,这是一个很值得深思的问题。最终我还是选择了VUE一样的管理方式,使用npm。Vue的脚手架默认就是支持npm的。但是小程序需要你手动安装。当然,这部分官方文档是有介绍的,想看官方文档的同学,请移步《npm支持》写这篇博客的原因就是,官方文档我看不懂,反原创 2020-09-26 15:11:25 · 1155 阅读 · 0 评论 -
小程序(一)创建第一个小程序
小程序第一篇,创建小程序。1:打开微信开发者工具,点击创建,如下图所示:2:新建小程序,你可以新建一个小程序账号,获取appid,创建小程序账号这部分就不细说了,准备一个没有注册过小程序或者公众号的邮箱按照官方给的步骤一步步操作就可以了。我这里就不注册账号了,所以,在APPID那一项,我选择了使用测试号,如下图所示:3:创建成功,如下图所示:4:小程序的目录结构如下图所示:至此,一个小程序创建完成。有好的建议,请在下方输入你的评论。...原创 2020-09-26 15:05:12 · 523 阅读 · 0 评论