小程序之旅
文章平均质量分 69
从零开始学小程序,并完成一个阅读类小程序的总结和思考。
_龙衣
想到就去做,万一实现了。
展开
-
微信小程序-基于云开发实现社区项目(Demo版本的升级)
针对上一版 【微信小程序~云开发的实现的一个社区 Demo(完结~)】 项目的问题,做了问题修复和功能优化以及UI美化,起码整体界面效果看起来不那么“程序员”了。同时还新增了很多小程序项目中常用的功能,每个功能的实现也都整理出对应文档。项目整体分包结构清晰,而且代码简单 99% 都是最基础的 html+css+js 知识。而且利用腾讯云提供的云开发,我们可以一个人就把前后端的工作都给实现。微信云开发官方介绍文档开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。云开发.原创 2021-09-11 07:06:39 · 1800 阅读 · 7 评论 -
微信小程序-使用 vant-weapp 之后的分包优化
背景在开发中引入了 vant-weapp 导致项目包过大,真机调试不了,也上传不了,所以只能分包加载了。实现首先就是根据官方文档进行分包但是有可能包体积还是过大,这时候只能进入到vant-weapp库的目录下,删除不必要的组件了。我们在用npm安装vant-weapp构建后会生成两个文件夹这两个文件的区别,官网也说明了:原理介绍node_modules 目录不会参与编译、上传和打包中miniprogram_npm 目录,里面会存放构建打包后的 npm 包,也就是小程序真正使用的 np原创 2020-11-30 19:01:09 · 3700 阅读 · 0 评论 -
微信小程序[电商]-撒花完结~
计划中的电商Demo 也算了完成了。除了支付功能,电商小程序的基本样式还是有了的。更多功能可扫码查看。PS:下方多图,可扫小程序码更直接的查看。功能首页自定义 TabbarBanner 组件集成腾讯地图实现定位多种类型的列表展示Grid 网格展示不同类别分类滑动右侧的列表,左侧的浮标跟随移动。点击左侧的浮标,右侧的列表滑到指定的列表。购物车功能全选单选滑动删除我的详情MarkDown 展示富文本形式截图分享多种主题可选识别图中二.原创 2020-09-27 23:26:48 · 977 阅读 · 4 评论 -
微信小程序-使用云开发 + Canvas 生成指定页面的二维码
参考获取小程序码原创 2020-09-26 17:50:44 · 1128 阅读 · 1 评论 -
微信小程序-中英文文本换行的小问题
现象一个for循环出来的列表,居然有的换行且结尾省略,有的却不换行。检查了半天没发现哪里写错布局,最后查看数据库中两个文本描述。一个是以中文结尾,一个是以英文结尾。猜想有可能是这个导致。原谅css没学好…于是一顿操作,找到了word-break: break-all;这个样式,添加进去即可效果...原创 2020-09-24 23:03:22 · 1680 阅读 · 0 评论 -
微信小程序- Promise 以及 async await 使用示例
JavaScript 的回调在之前的代码中,我们通过云函数的方式获取openid就是使用的回调方式。而我们要获取回调中的结果再去处理接下来的操作,只能在对应的回调方法里面写,这就是常说的死亡回调getOpenid() { wx.cloud.callFunction({ name: 'getOpenid', success: res => { console.log(res.result.openid) // 做获取到 o原创 2020-08-30 22:08:24 · 1917 阅读 · 0 评论 -
微信小程序-订阅消息开发总结
贵人多忘事在这个信息爆炸的时代,很多时候我们都只有鱼的7秒钟记忆。这就导致我们经常性的会遗忘前两秒发生的重要事情每当事后想起来的时候总会拍大腿说当时要是有消息提醒我就好了。消息提醒就好比:两秒钟的时候我看到了一个很好笑的笑话,我将它标记为很好笑的笑话并且在我伤心难过的时候会自动让我想起这个笑话。正好我在失去记忆的第八秒时感觉很伤心,这时候我收到了笑话,瞬间心情美丽了很多。文章目录贵人多忘事效果图开发开发主要步骤遇到的坑总结参考上车效果图下图是在拼多多小程序中的效果图,拼多多还是很细心的原创 2020-08-24 23:09:57 · 908 阅读 · 0 评论 -
微信小程序[电商]-实现标签云热搜及搜索功能
标签云随机颜色搜索列表原创 2020-07-26 21:16:25 · 1275 阅读 · 0 评论 -
微信小程序[电商]-集成腾讯地图实现定位功能
效果展示通过腾讯地图的经纬度转换接口将小程序中获取的经纬度转为具体的地址显示在界面上。地图集成在腾讯地图的开发者页面注册应用获取key申请地址:申请密钥填写相关信息后生成 key我这里已经创建好了,复制下面的 key到微信小程序的js代码中发送请求即可返回当前定位的经纬度坐标,最后根据 坐标拾取器 将经纬度转为具体的地址信息:展示位置home.wxml的布局代码如下:address 表示地址信息,searchTip 表示搜索框的提示信息<!-- location原创 2020-07-19 23:21:44 · 556 阅读 · 0 评论 -
微信小程序[电商]-自定义 Banner(轮播图)组件
在电商Demo中我们使用了vant-weapp组件库,主要原理是自定义组件。大部分的项目都会需要Banner组件,而每个项目在需要Banner功能时我们都需要重复写这些代码,那么我们可以将其作为自定义组件,在下次使用是直接使用即可。这也是自定义组件存在的意义:代码复用、降低耦合、便于维护。在vant-weapp组件库中还没有提供Banner组件,所以我们来实现Banner组件,顺便了解自定义组件的实现过程。参考【自定义组件】:官方文档【微信小程序自定义组件实现 tabBar、navBar:实原创 2020-07-08 18:15:50 · 2309 阅读 · 1 评论 -
微信小程序[电商]-Tabbar 实现底部导航栏
效果图底部导航的切换效果,首页和我的页面切换的时候走在底部导航,而分类和购物车页面切换会跳转新页面。如果使用【微信原生的底部tab】是没法实现这个效果的,这里使用了【Tabbar 标签栏】实现。安装 vant-weapp参考 【快速上手】在项目根目录,使用 npm 安装 vant-weapp:# 通过 npm 安装npm i @vant/weapp -S --production在微信开发者工具点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后原创 2020-07-06 23:16:45 · 1098 阅读 · 5 评论 -
微信小程序-基于云开发 CMS + Vant Weapp 电商 Demo 来了!
很久就在计划的 Demo,他来了!先来看个目前已经实现的本地页面效果图:由于每个用户只能拥有 5 个微信小程序,我个人原因只能在之前已经上线的一个小程序《黎族文化传承》中进行修改,也是由于这个小程序是个人类型小程序,我后来加的这些属于电商功能,个人小程序是不支持的上线的,所以线上是没法看到上面所展示的效果。上面的效果图基本上一个电商该有的功能都罗列了,目前仅实现了首页功能,其他功能都还是静态页面。首页的数据使用了微信小程序提供的 CMS 后台管理系统实现数据的无脑添加。这里为了快速实.原创 2020-07-03 23:05:35 · 1231 阅读 · 0 评论 -
全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图这一节介绍,登录回调 以及 喜欢列表 的实现。登录回调:这里是指在获取登录完成之后,再进行下一步的操作。比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到。而登录成功之后不仅将用户信息刷新,同时将积分和喜欢列表的数量刷新。登录回调我这里实现的回调层级有点多,这也是回调的一个弊端,当回调层级很多代码就会很难理解。一个简单的回调例子:// 1、获取...原创 2019-12-10 23:36:41 · 493 阅读 · 0 评论 -
全栈项目|小书架|微信小程序-实现搜索功能
效果图上图是小程序端实现的搜索功能效果图。从图中可以看出热搜搜索分页原创 2019-12-09 23:02:10 · 832 阅读 · 0 评论 -
全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量。需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可。由于源码都相对简单,这里就直接贴源码了。wxml布局源码如下: <view class="button-area" catchtap="onLikeClick"> <bloc...原创 2019-12-08 15:19:46 · 865 阅读 · 0 评论 -
全栈项目|小书架|服务器端-NodeJS+Koa2 实现评论功能
评论功能分析上图可以看出评论功能主要实现了:评论的发布、评论列表的展示。在不考虑子评论以及图片评论的场景下,评论功能主要有以下两个接口:发布评论获取评论列表(考虑分页)评论 Model 的建立结合上图通过分析可以看出一条评论信息主要包含有:用户 id用户名用户头像评论信息书籍 id书籍名称(可选)那么根据以上的分析,我们的Model设计如下:Comment.i...原创 2019-12-06 14:18:03 · 462 阅读 · 0 评论 -
全栈项目|小书架|小程序端-评论功能实现
效果图发布评论发布评论的入口在图书详情页面,点击 写评论 按钮之后跳转到发布评论页面。wxml布局比较简单了,目前还没有添加图片评论功能,也没有子评论功能,所以伪代码就比较简单了:<view class="comment-container"> <!-- book name --> <view class="book-name"> &l...原创 2019-12-04 22:59:14 · 475 阅读 · 0 评论 -
全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口
通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现。书籍详情分析书籍详情页面如下:从上图可以分析出详情页面大概有以下几个接口:获取书籍详情信息获取用户对书籍的喜欢状态接口喜欢/不喜欢书籍接口获取评论列表写评论接口以上的接口,有的数据可以直接从已存在的数据表中去获取,比如:书籍详情信息,而其他新...原创 2019-12-03 23:19:00 · 373 阅读 · 0 评论 -
全栈项目|小书架|微信小程序-书籍详情功能实现
效果图实现分析从效果图上分析,书籍详情是通过点击首页的item后进入。进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口。点击登录之后即可加载出用户评论信息。通过上图我们可以分析出静态页面的主要结构如下:书籍信息左侧布局是图书图片中间布局从上到下是:名称、作者、出版社右侧布局是收藏icon登录提示弹窗上部分是提示文本...原创 2019-12-02 23:04:43 · 2671 阅读 · 2 评论 -
全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口
通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现。首页书籍信息先来回顾一下首页书籍都有哪些信息:从下面的图片可以看出目前一本图书信息主要有:图片字段名称字段作者字段出版社字段除了以上前端页面中可见的信息外,在服务器开发中还需要给每一条记录(数据)都加上下面的几个字段:创建时间字段更新时间...原创 2019-12-01 09:43:49 · 353 阅读 · 0 评论 -
全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果首页功能主要有搜索(下篇文章介绍)图书列表图书列表分析一波:列表是水平滑动点击列表会有按压效果:布局整体缩小每个布局的信息从上到下排列分别是:图片、书名、作者、出版社每个布局之间都有间隔根据以上信息,在没有服务器接口的时候我们可以利用模拟数据将静态页面实现出来。首先是水平滑动列表,这个可以使用swiper组件实现,在使用swiper组件的时候可以通过设置pr...原创 2019-11-28 23:27:04 · 962 阅读 · 0 评论 -
全栈项目|小书架|微信小程序-登录及token鉴权
小程序登录之前也写过微信小程序登录的相关文章:微信小程序~新版授权用户登录例子微信小程序-携带Token无感知登录的网络请求方案微信小程序开通云开发并利用云函数获取Openid也可以通过官方的这张时序图了解小程序的登录流程:说明:调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。调用 auth.code2Session 接口,换取 用户唯一标识 ...原创 2019-11-27 23:50:30 · 1147 阅读 · 3 评论 -
全栈项目|小书架|微信小程序-项目结构设计分包
第一篇博文先写分包第二篇博文再写登录,token获取,token验证token无感知登录原创 2019-11-27 22:26:57 · 742 阅读 · 0 评论 -
微信小程序-携带Token无感知登录的网络请求方案
去年写了一个网络请求工具封装的文章微信小程序~ 网络请求工具的封装当时没有考虑登录需要服务器token验证token 是什么?token 顾名思义就是令牌,也就是一种身份标志。用于和服务器确定身份,它具有时效性,超过有效时间身份标志就会失效。服务器为什么需要token验证呢?客户端和服务器连接是通过HTTP协议连接,而HTTP协议是无状态的,这种无状态意味着程序需要验证每一次请求,...原创 2019-10-27 15:40:18 · 6043 阅读 · 0 评论 -
uni-app下拉刷新、上拉加载更多实现
下拉刷新下拉刷新文档在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh:true。当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷...原创 2019-07-17 21:14:24 · 26450 阅读 · 6 评论 -
uni-app Banner ( 轮播图 ) 实现
BannerBanner 的实现使用的是 swiper 组件实现,在swiper组件里面添加swiper-item组件即可实现例子<view class="page-section-spacing"> <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" ...原创 2019-07-17 21:12:12 · 33542 阅读 · 9 评论 -
uni-app 页面传参实战
页面跳转保留当前页面并跳转新页面保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack可以返回到原页面。例子:跳转到 test 文件夹下的 test 页面uni.navigateTo({ url: '../test/test'});不保留当前页面并跳转新页面关闭当前页面,跳转到应用内的某个页面。例子:跳转到 test 文件夹下的 tes...原创 2019-07-17 21:09:59 · 4302 阅读 · 0 评论 -
uni-app 界面交互实战(微信小程序可用)
交互反馈Toast显示消息提示框uni.showToast({ title: '标题', // 标题 icon: 'none', // 不显示图标 mask: true, // 显示透明蒙层,防止触摸穿透 duration: 2000});隐藏消息提示框uni.hideToast();Loading显示 loading 提示框, 需主动调用 uni.hid...原创 2019-07-17 21:06:55 · 3306 阅读 · 0 评论 -
uni-app 基础语法
data 属性data 必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。全局变量uni-app 全局变量的几种实现方式公用模板定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。(个人感觉,推荐使用)示例如下:在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新...原创 2019-06-17 20:21:14 · 7870 阅读 · 0 评论 -
uni-app 项目结构
项目结构页面结构遵循 VUE 单页面结构只能有一个 template,一个script,可以有多个style<template> // 布局</template><script> export default { // data 必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据 ...原创 2019-06-17 20:19:16 · 3697 阅读 · 0 评论 -
uni-app 常用组件实战
view视图容器文档地址用于包裹其他组件scroll-view可滚动视图区域,使用时需要添加一个固定的高度。文档地址用于包裹其他组件,且在该区域内可以滑动。允许横向,纵向滑动。如果是页面需要实现上拉加载、下拉刷新,推荐使用 页面的滑动加载和下拉刷新缺陷和使用注意适配问题:请勿在 scroll-view 中使用 canvas、textarea、map、...原创 2019-06-17 20:17:28 · 4079 阅读 · 1 评论 -
flex 布局实战
结合 上篇文章 你一定能熟练使用 flex 布局======================flex 实战======================原创 2019-06-16 16:30:14 · 1037 阅读 · 0 评论 -
flex 布局详解
在 GitHub 写了篇博文,这里就不复制粘贴了,点击下方链接查看吧看完这篇文章应该能够熟悉 flex 布局的使用了,如果还不熟悉,那么请看下一篇实战。flex 布局...原创 2019-06-16 16:27:11 · 334 阅读 · 0 评论 -
微信小程序云开发实现一个社区 Demo(补充)
之前写了一篇文章介绍如何使用云开发来实现一个社区 Demo: 微信小程序~云开发的实现的一个社区 Demo(完结~) 得到很多小伙伴的认可但也出现了一些问题。主要问题有:发布的图片不显示,跨端发布的图片不显示点赞功能优化数据库不清晰需要添加回复功能针对以上问题,我将代码更新了,地址在:dongxi346/doughnut ,在README中有使用介绍,或者接着往下看。ps:有帮助...原创 2019-05-26 09:21:40 · 1917 阅读 · 3 评论 -
推荐一个微信小程序 UI 框架 lin-ui
lin-ui 是慕课网七月老师团队的开源项目,七月老师可以算是我的小程序导师,当初为了学小程序,也是找了好多资料,看了官方文档也是一知半解,最后在慕课网看了老师的课程后果断入坑,老师的课入坑绝对不坑!lin-ui 的GitHub地址 lin-uilin-ui 文档 地址 lin-ui doc用过 lin-ui 的都说爽,一直用一直爽。lin-ui 是基于原生小程序components...原创 2019-04-28 23:31:13 · 5516 阅读 · 6 评论 -
微信小程序实现上拉加载下拉刷新
为什么需要上拉加载和下拉刷新?需要上拉加载是因为手机一屏已经装不下产品经理天马行空的想法了,当然也是我们想要看到更多的内容,所以上拉加载是一个 App 的必备。(简陋的效果如下)需要下拉刷新也是我们觉得现有的内容都看完了满足不了心中的期望了,所以下拉试试,碰巧下拉看到了新的内容,很开心~(比上面的图好看一些的效果图如下)上面两张图是在小程序中实现的上拉加载和下拉刷新效果图。在小程序中实...原创 2019-01-24 21:04:58 · 1317 阅读 · 0 评论 -
微信小程序自定义组件实现 tabBar、navBar
久不写文,手有些生,见谅。最近App项目要将其中一个模块抽出来做成小程序,功能包含 :底部的Tab栏,顶部的标题栏这里选择自定义的原因有两点:narBar 微信原生不支持设置返回图标,且在 Android 上标题是居左显示,在 iOS 上是居中显示。底部的 tabBar 不支持点击跳页面,图标布局不支持超过 tabBar 的高度。下面两张图是简单实现的效果。实现分析源码地...原创 2019-01-13 20:45:13 · 5104 阅读 · 2 评论 -
微信小程序 组件叠加效果(如 Android 中的添加蒙层)
实现的效果如下:可以看出这是由image组件和text组件叠加到一块组成的蒙层效果。在小程序中实现这个效果主要用到z-index属性和position属性z-index的使用必须是双方组件都设置了position属性下才会生效。z-index:表示的组件的层级关系,值越小越在最下方。那么这里我们的的蒙版文字是在图片的上方,所以布局样式可以这么写:重点关注 position和z-i...原创 2019-01-06 00:08:06 · 10491 阅读 · 2 评论 -
Android 开发者从0到1发布一个微信小程序的采坑过程
需要代码可在文末扫码识别二维码,在我的----关于我—可找到我的联系方式。小程序已发布,可在微信小程序中搜索找到,或者在文末找到小程序二维码体验一波实现效果分析目录Android 开发者从0到1发布一个微信小程序的采坑过程——首页实现Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现Android 开发者从0到1发布一个微信小程序的采坑过程——使用帮助页面An...原创 2018-12-02 20:39:27 · 452 阅读 · 0 评论 -
Android 开发者从0到1发布一个微信小程序的采坑过程——发布上线后动态切换页面
Android 开发者从0到1发布一个微信小程序的采坑过程——首页实现Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现Android 开发者从0到1发布一个微信小程序的采坑过程——使用帮助页面Android 开发者从0到1发布一个微信小程序的采坑过程——发布上线后动态切换页面需要代码可在文末扫码识别二维码,在我的----关于我—可找到我的联系方式。本文主要介绍...原创 2018-12-01 22:55:52 · 363 阅读 · 0 评论