从零开始三天学会微信小程序开发(三)

看到不少入门的小程序开发者不断的问重复性的问题,我们从实战角度开发了这个课程,希望能够帮助大家了解小程序开发。

课程分三天:

  • 第一天:微信小程序开发入门
  • 第二天:给小程序接入云端数据
  • 第三天:完善我的小程序

第三天:完善我的小程序

(一)如何在页面之间传递参数

1. 传递参数

我们已经实现了首页到内容页面之间的跳转,但并没有区分到底是从哪个分类跳转过去的。为此,我们还需要从index页面传递分类名到detail页面。

修改index.wxml文件中的navigator组件代码如下:

<navigator style="border-color: {{link.color}};" class="btn" url="/pages/detail/detail?name={{link.name}}" wx:for="{{columnlinks}}" wx:for-item="link">{{link.name}}</navigator>

即,在原来的url尾部加上了“?name={{link.name}”。

2. 接收参数

回到detail.js文件,修改onLoad方法如下:

 onLoad(options) {this.setData({name:options.name})},

options对象会存放从上一个页面传递过来的参数,在这里options.name就是index页面传递过来的分类名,我们通过this.setData()方法把它绑定到name这个变量中去。

现在你在detail.wxml文件中加上{{name}},可以看到分类名成功地传递过来了。

(二)获取一条评语内容

从Comment评语内容表的设计和数据添加我们可以看到,每个分类下都有很多的评语,而我们这个小程序每次只需要显示其中一个。所以,我们需要编写一个从Comment表指定分类中获取一条记录的代码。

  • 首先,在detail.js的数据初始化代码中定义一个index变量,初始值为0,表示要获取的那条数据在Comment表指定分类中属于第几条。代码如下:
data: {index:0},
  • 接着,在onLoad()方法中编写如下的代码:
onLoad(options) {this.setData({name:options.name,content:''})const query = wx.Bmob.Query("Comment");query.equalTo("categoryname","==",this.data.name);query.skip(this.data.index)query.limit(1)query.find().then(res => {this.setData({content:res[0].content,index:this.data.index + 1});})},

这里需要说明几点:

  1. query.equalTo方法是Bmob SDK提供的条件查询方法。在这个例子中,我们要查询的条件是categoryname字段的值等于this.data.name(传递过来的分类名)的值。注意:这里用的是==号,而不是=号。

  2. query.skip(m)和query.limit(n)方法经常配合一起使用,skip方法表示跳过前面m条数据,limit方法表示最多获取n条数据。

  3. this.setData绑定数据的时候别忘记了index:this.data.index+1,表示我们接下来要获取的是下一条数据。

现在,数据已经获取到了,我们还要把它呈现在界面中。修改detail.wxml文件,代码如下:

<textarea value="{{content}}" class="txt"></textarea>
<view class="row-btn"><button class="bt">换一个</button><button class="bt">复制</button><button class="bt">分享</button>
</view>

修改dtail.wxss文件,给组件添加样式,代码如下:

page{padding: 20rpx;
}
.txt{width: 95%;height: 30vh;border-radius: 16rpx ;background: rgb(240, 240, 240);box-sizing: border-box;padding: 20rpx;
}
.row-btn{display: flex;justify-content:space-between;margin-top: 20rpx;margin-right: 20rpx;
}
.bt{color: white;width: 100px !important;background-color: green;margin-right: 10rpx;
}

这里需要了解的是,page样式是针对整个页面的。比如,这里通过padding: 20rpx控制页面内部的组件离边框20rpx。

完成后预览的效果如下:

52.png

(三)封装成一个方法

现在,点击“换一个”按钮,textarea的内容并不会有任何变化,我们还需要给这个按钮添加点击事件。

打开detail.js文件,添加getContent()方法,并在onLoad()方法中用this.getContent()调用这个方法。代码如下:

onLoad(options) {this.setData({name:options.name,content:''})this.getContent();},getContent(){const query = wx.Bmob.Query("Comment");query.equalTo("categoryname","==",this.data.name);query.skip(this.data.index);query.limit(1);query.find().then(res => {this.setData({content:res[0].content,index:this.data.index + 1});});},

这里需要说明的是:

  1. getContent()方法是我们自定义的方法,名称可以改变。

  2. getContent()方法可以放在detail.js文件里面和onLoad()、onReady()等方法同级的任何地方。

  3. 不要漏掉getContent(){ }, 这个方法最后的英文逗号。

(四)给“换一个”按钮绑定方法

现在,我们可以给“换一个”按钮绑定(bind:tap)刚写的getContent方法。修改detail.wxml文件如下:

<button class="bt" bind:tap="getContent">换一个</button>

现在点击“换一个”按钮,已经会不断切换评语内容。

(五)学会看调试器

我们点击多几次之后,会发现页面内容一直保持不变。

观察开发工具中的“调试器”,看到下面的错误提示信息:

53.png

这是因为我们已经翻看到这个分类下的最后一条记录了。为了解决这个问题,需要简单修改getContent()方法:

getContent(){const query = wx.Bmob.Query("Comment");query.equalTo("categoryname","==",this.data.name);query.skip(this.data.index);query.limit(1);query.find().then(res => {if(res.length<=0){this.setData({index:0})this.getContent()}else{this.setData({content:res[0].content,index:this.data.index + 1});}});},

即,查询结果回来之后,我们先判断这个结果是否有内容。如果没有的话,设置index为0,并再次获取。

为了让界面效果更具有动感,我们还可以和之前一样,在请求时加上wx.showLoading()和wx.hideLoading()方法。这个自行尝试添加。

(六)实现更多的功能(复制、分享和客服)

为了实现复制的功能,我们像上面一样,添加一个copy()方法,代码如下:

opy(){wx.setClipboardData({data: this.data.content,})},

这个代码很容易理解,即把this.data.content的内容复制到剪切板中去。

我们再把copy()方法绑定到“复制”按钮中去:

<button class="bt" bind:tap="copy">复制</button>

完成之后,预览效果如下:

54.png

小程序还内置了其他的方法,让我们不需要编写额外的代码,下面我们给“分享”按钮绑定内置的分享功能:

<button class="bt" open-type="share">分享</button>

预览效果如下:

55.png

联系“客服”的事件和分享的事件类似,代码如下:

<button open-type="contact" class="bt">客服</button>

(七)如何选择小程序的开发主题

开发并不难,只要你肯耐心点,花时间按这个课程的步骤一步一步去实践,很快就会掌握小程序开发的经验。

等你掌握好小程序开发技术,可能会更让你困惑的是:我应该选择什么样的开发主题?中国人口那么多,为什么我开发出来的应用没有人用?

这是因为我们开发产品前没有好好地进行调研。这里,我们推荐一个小程序:微信指数。

56.png

当你有一个好想法或者想给小程序取名的时候,建议打开这个小程序,查看和你想法相关的各种关键词对应的指数热度。如果指数热度很低,那你就要好好审视你这个想法或者名字到底是不是一个好的创意,好的名字。在一个很多鱼的大池塘里面钓鱼,虽然钓的人多,但机会也更多。在一个连小鱼小虾都没有几个的野池塘,虽然没有什么人来竞争,但你也很难钓到鱼。

我们的课程到此为止,有任何问题欢迎大家一起交流技术(wechat: xiaowon12),享受写程序的乐趣。

源码请查看:https://gitee.com/zhang-ming-123/threedaystudyminiprogram

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38060.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL高级-MVCC- readview介绍

文章目录 1、介绍2、ReadView中包含了四个核心字段&#xff1a;3、版本链数据的访问规则&#xff1a;4、不同的隔离级别&#xff0c;生成ReadView的时机不同&#xff1a; 1、介绍 ReadView&#xff08;读视图&#xff09;是 快照读 SQL执行时MVCC提取数据的依据&#xff0c;记录…

【计算机组成原理实验】——运算器组成实验

计组TEC4实验——运算器组成实验 1. 实验目的 (1&#xff09;掌握算术逻辑运算加、减、乘、与的工作原理。 (2) 熟悉简单运算器的数据传送通路。 (3) 验证实验台运算器的8位加、减、与、直通功能。 (4) 验证实验台的4位乘4位功能。 (5) 按给定数据&#xff0c;完成几种指…

SerDes介绍以及原语使用介绍(4)ISERDESE2原语仿真

文章目录 前言一、iserdese2_module模块二、oserdese2_module模块三、顶层模块四、仿真结果分析 前言 上文详细介绍了ISERDESE2原语的使用&#xff0c;本文根据仿真对ISERDESE2原语的使用进一步加深印象。在仿真时&#xff0c;与OSERDESE进行回环。 一、iserdese2_module模块…

昇思MindSpore学习笔记4--数据集 Dataset

昇思MindSpore学习笔记4--数据集 Dataset 摘要&#xff1a; 昇思MindSpore数据集Dataset的加载、数据集常见操作和自定义数据集方法。 一、数据集 Dataset概念 MindSpore数据引擎基于Pipeline 数据预处理相关模块&#xff1a; 数据集Dataset加载原始数据&#xff0c;支持文本…

移动端H5应用,使用了postcss-px-to-viewport插件,750设计稿兼容Vant框架

目前在搞一个移动端的H5项目&#xff0c;使用的是Vue3Vant框架。设计稿是750的&#xff0c;而且使用了postcss-px-to-viewport。所以发现使用Vant框架的时候&#xff0c;发现有点问题&#xff0c;好像缩小了&#xff0c;后来百度了一下&#xff0c;是需要设置portcss.config.js…

vue components

vue components intro 组件是带有名称的可复用实例。 因为组件是可复用的组件实例&#xff0c;所以它们与根实例接收相同的选项&#xff0c;例如 data、computed、watch、methods 以及生命周期钩子等。 组成 props&#xff1a; 组件的attributes&#xff0c;可以传任意类型…

大创项目推荐 题目:基于机器视觉的图像矫正 (以车牌识别为例) - 图像畸变校正

文章目录 0 简介1 思路简介1.1 车牌定位1.2 畸变校正 2 代码实现2.1 车牌定位2.1.1 通过颜色特征选定可疑区域2.1.2 寻找车牌外围轮廓2.1.3 车牌区域定位 2.2 畸变校正2.2.1 畸变后车牌顶点定位2.2.2 校正 7 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享…

题目的起名

整个经济社会描绘为无数个交织的方程组。机场航班的起降时间、物流的路径规划、金属冶炼的原料配比、工厂店铺的选址……”而这些方程组的价值在于&#xff0c;“为了实现经济学最简单而又最权威的目标——对稀缺资源进行最佳利用&#xff0c;必须快速求出这些方程组的最优解。…

Leetcode3192. 使二进制数组全部等于 1 的最少操作次数 II

Every day a Leetcode 题目来源&#xff1a;3192. 使二进制数组全部等于 1 的最少操作次数 II 解法1&#xff1a;遍历 由于 nums[i] 会被其左侧元素的操作影响&#xff0c;所以我们先从最左边的 nums[0] 开始思考。 分类讨论&#xff1a; 如果 nums[0]1&#xff0c;无需反…

debian 安装mongodb

安装所需工具 apt install gnupg curl 添加公钥 wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add - 添加源 echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-6.0.gpg ] https://repo.mongodb.org/apt…

amis-editor 注册自定义组件

建议先将amis文档从头到尾&#xff0c;仔细看一遍。 参考&#xff1a;amis - 低代码前端框架 amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component&#xff0c;然后把其他属性作为 props 传递过去完成渲染。 import * as React from …

Linux开发讲课17--- 在shell脚本中,如何将一个命令存储在一个变量中

问&#xff1a; 将一个命令保存到一个变量中&#xff0c;以便稍后再使用&#xff08;不是命令的输出&#xff0c;而是命令本身&#xff09;。 有一个简单的脚本如下&#xff1a; command"ls"; echo "Command: $command"; #Output is: Command: ls b$com…

c++ 给定一个非常巨大的数组,如何找到它的中值

快速选择算法&#xff08;最优解&#xff09; #include <iostream> #include <vector> #include <algorithm>using namespace std;class Solution { private:// 快速选择算法中的分区函数int partition(vector<int>& nums, int left, int right)…

逆向学习汇编篇:参数传递与返回地址的使用

本节课在线学习视频&#xff08;网盘地址&#xff0c;保存后即可免费观看&#xff09;&#xff1a; ​​https://pan.quark.cn/s/b5b046015da2​​ 在汇编语言中&#xff0c;函数调用和参数传递是编程的基础组成部分。了解如何在汇编中传递参数以及如何处理返回地址对于逆向工…

LeetCode 78. 子集

更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡&#xff0c;更多解法等你一起来参与哦&#xff01; LeetCode 78. 子集&#xff0c;难度中等。 迭代 解题思路&#xff1a; 初始化结果集 result&#xff0c;其中包含一个空集 []&#xff1b;遍历数…

flex讲解

随着前端技术的不断发展和更新&#xff0c;flex布局成为前端布局的主流。但是仍然有很多前端新手搞不懂flex到底怎么用&#xff01;&#xff01;&#xff01;今天我们就来好好讲讲flex布局 老规矩先上定义 什么是flex布局 布局的传统解决方案&#xff0c;基于盒状模型&#x…

郑州高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

随着制造业的转型升级&#xff0c;智能化、信息化已成为制造业发展的必然趋势。数字孪生技术作为智能制造领域的关键技术之一&#xff0c;它通过构建与实体系统相对应的虚拟模型&#xff0c;实现对实体系统的实时监测、预测和优化&#xff0c;为制造业的智能化、信息化提供了强…

LitelDE安装---附带每一步截图以及测试

LiteIDE LiteIDE 是一款专为Go语言开发而设计的开源、跨平台、轻量级集成开发环境&#xff08;IDE&#xff09;&#xff0c;基于 Qt 开发&#xff08;一个跨平台的 C 框架&#xff09;&#xff0c;支持 Windows、Linux 和 Mac OS X 平台。LiteIDE 的第一个版本发布于 2011 年 …

PTA-线性表实验(JAVA)

题目1&#xff1a;Josephus环的问题及算法 【实验内容】 编程实现如下功能&#xff1a; 题意说明&#xff1a;古代某法官要判决n个犯人的死刑&#xff0c;他有一条荒唐的法律&#xff0c;将犯人站成一个圆圈&#xff0c;从第start个犯人开始数起&#xff0c;每数到第distance的…

【Spring Boot AOP通知顺序】

文章目录 一、Spring Boot AOP简介二、通知顺序1. 通知类型及其顺序示例代码 2. 控制通知顺序示例代码 一、Spring Boot AOP简介 AOP&#xff08;Aspect-Oriented Programming&#xff0c;面向切面编程&#xff09;是对OOP&#xff08;Object-Oriented Programming&#xff0c…