首页 > 科技未来 > 内容

微信应用号,小程序开发教程第三部分

发布于:2024-06-18 编辑:匿名 来源:网络

雷锋网出版社:这篇文章是关于程序员作者博卡君的。

雷锋网已获得作者授权发布。

未经授权禁止转载!本文是微信小程序开发教程系列的第三篇。

在阅读本文之前,你可以先阅读这两篇文章:重磅|微信应用号,最新小程序开发教程 微信应用号,最新小程序开发教程第二期。

谢谢朋友们。

支持!这两天博卡君得到了很多支持和安慰,结交了很多志同道合的朋友。

目前微信发布的工具和代码还不是正式版本,可能随时进行调整。

每个人都应该先去体验、去学习。

微信应用号,小程序开发教程第三部分

最近这个教程让我身心俱疲。

虽然很辛苦,但是我很开心。

第五章:微信小程序名片夹详情页开发今天的内容又增加了新信息!除了开发日志本身之外,我还回答了一些朋友的问题。

废话不多说,我们看一下名片盒子详情页的效果图:注意一下大致需求:顶部后面是轮播图,二维码按钮弹出模态盒子信息,点击微信栏,点击保存到手机,需要地址栏 地图显示、名片分享也是模态框指引。

首先是轮播图片,autoplay自动播放,间隔轮播时间,时长切换速度,可以根据自己的需要添加。

Delete:这是一个删除按钮。

加载后隐藏。

用户需要点击轮播图进入,然后轮播图就会全屏显示。

noClickImg 和 ClickImg:在全屏和非全屏轮播图像之间切换。

点击事件changeClick绑定切换。

只是改变风格。

块:图片列表。

Number_img:当前轮播索引(currentNumber),以及图像长度设置(cardnum)。

其中,currentNumber: //轮播图变化时改变数字 //初始化数据 Data:{currentNumber:1} slipchange:function(e){ var number = e.detail.current; this.setData({ currentNumber:number }) }, 这里可以看到全屏状态下点击关闭按钮时,getBackStyle将changeClick切换为imgFullScrenn,处于待机状态。

再次单击可返回原始样式。

切换后,事件返回getBackStyle。

灵活运用吧。

刷新开发者工具后,可以看到具体效果如下: 在详情页,可以看到信息风格基本一致,可以使用微信提供的循环块。

以下是详情页中的个人信息数据。

如果有信息就会显示。

如果没有数据,则不会显示。

//这里使用中文信息。

var chinaMessage = res.card.groups[0].fields;var personMessage= []for( var i = 0;i

我们需要做的就是将显示值绑定到它上面,然后我们就可以调用它了。

这个版本的微信的setData不支持数据的异步更新,所以当真正的网络数据请求发生时,我们必须在最后添加forceUpdata()来强制视图渲染,否则会出现很多莫名其妙的bug。

这里解释一下:这是服务器的真实数据。

可以看到会报错。

可能是js的执行顺序。

一一往下走。

此时仍在请求网络数据。

只需定义一个变量即可。

当然,这里的数据都是推上去的。

以下是二维码弹出消息。

这是弹出的模态框的二维码信息。

布局初始化处于none状态。

需要直接绑定数据: this.setData({ //模态框名称: "显示?隐藏"}) 方法就是让它显示。

只需在需要的地方调用该方法即可。

(支持重复调用)详情页的公司位置图直接调用微信提供的接口(群里的demo有实现方法)。

可以看到实现的效果:下一章:微信(小程序)我的页面开发。

第六章:我的页面开发效果图以及微信小程序的需求:用户有多张名片,需要左右切换查看。

向下切换是菜单按钮。

这里我们需要在两个地方滑动。

我们使用微信提供的滑动组件swiper,并以嵌套的方式使用。

第一层是名片展示和菜单按钮的上下滑动。

第二层是名片展示的左右滑动(支持相互嵌入,可以成套使用,放心使用)。

添加Vertical表示垂直滑动,去掉Vertical表示左右滑动。

整体结构如下: 由于需要支持多次点击切换,因此点击事件与数据切换方法绑定。

初始化数据为nextSlide:再看nextSlide事件。

currentSlide 是当前页面的索引。

改变它就可以完成切换效果。

上图中可以看到,初始化数据时cs被设置为0。

因此,只需赋值当前的data.cs,然后将绑定的点击事件clickNext切换为nextSlideAgain即可。

我们再看一下 nextSlideAgain 事件。

执行减去1索引,达到多次点击的切换效果。

具体效果可见一斑。

点击个人名片,进入编辑名片页面。

由于需要参数,所以使用wx.navgateTo。

大家可以看看效果: 最后,一些有用的信息:我们发出第一个教程时有人注意到了这一点。

如何进行真正的数据交互,大家可以在下面了解一下。

首先进入的是MD5加密和请求者交互层。

如何引用MD5.js?当然是模块化的require,别忘了module.exports引用的js。

下面是引用 MD5.js 的 requester.js。

ApplicationRoot为服务器地址(配置服务器时查看开发设置页面的AppID和AppSecret,并配置服务器域名)。

Require.js module.exports 这里暴露了方法。

此时全局app.js中引入了require.js,并映射到全局global。

这个全球性就是全球性。

这时候如果那个页面需要那个页面的话,直接接受就可以了。

模块化很有用吗?可以完整的看一下一个request与后台进行数据交互的实现,如下:图1是requester.js中的封装。

图2展示了需要调用数据的页面渲染。

如果您有任何疑问,请告诉我。

一些已知的问题将在下一章中解释。

应该有人喜欢sublime编辑器。

有人问如何切换高亮。

只需切换到页面右下角的 html 即可。

下一章:微信小程序编辑名片页面开发(涉及要点:检索、排序、滑动和页面交互)。

相关阅读:不要高估微信小程序,也不要低估百度91的销量。

翻遍“微信小程序”知乎问答,整理了这篇文章。

微信应用号,小程序开发教程第三部分

站长声明

版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容,欢迎发送邮件 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

标签:

相关文章

  • 一级市场并购退出的难点是什么?

    一级市场并购退出的难点是什么?

    自2019年港股、美股IPO退出受阻以来,创业者和投资者开始意识到IPO退出是一座相对被动的独木桥,并购退出开始受到关注。 今年年中,A股IPO退出因政策调整持续收紧,并购退出关注度再度升级。 诚然,过去二十年中国私募股权市场一直以IPO退出为主,而并购退出一直尤为小众。 然

    06-18

  • IC分销商:8英寸产能紧张明年Q1将继续推高芯片价格

    IC分销商:8英寸产能紧张明年Q1将继续推高芯片价格

    据IC分销商人士透露,由于8英寸晶圆代工产能持续紧张,电源管理IC、网络芯片、供应商的工业和汽车MCU今年第一季度仍有能力提价。 据digitimes报道,随着疫情期间全球企业数字化转型需求增加,以及多个主要国家积极推动碳减排,一线制造商、品牌供应商、金融机构正在实施ESG管

    06-08

  • 吉利汽车与大搜车达成战略合作,打造全国首个汽车直销数字化新零售网络

    吉利汽车与大搜车达成战略合作,打造全国首个汽车直销数字化新零售网络

    5月18日,吉利汽车与大搜车宣布战略合作,共同打造全国首个数字化“实直销、定点”在汽车直销新零售网络中,双方合作的首款直销车型——缤越PRO轻骑BSG版,在大搜车旗下汽车新零售平台当个车上独家推出,固定价格全国0元价。 大搜车创始人兼CEO姚军红(左)与吉利汽车集团副总

    06-17

  • 普洛斯在日本和欧洲的两只物流收益基金已完成新一轮募资

    普洛斯在日本和欧洲的两只物流收益基金已完成新一轮募资

    投资界(ID:pedaily)1月15日消息。 近日,普洛斯在日本和欧洲的两只物流收益基金完成了新一轮募资。 筹集的资金为“GLP日本收入基金”(GLP JIF)和“GLP欧洲收入基金II”(GLP EIP II)。 过去12个月,普洛斯全球物流行业基金管理的资产增加了近1亿美元。 GLP JIF是日本最

    06-18

  • 专注钢铁数字供应链服务,兰格获近亿元A轮融资

    专注钢铁数字供应链服务,兰格获近亿元A轮融资

    投资社区(ID:pedaily)11月30日消息,据创业网消息,钢铁数字供应链服务平台“兰格”宣布据了解,其已完成奇富资本独家投资的近亿元A轮融资。 据悉,本轮融资将主要用于拓展外部区域市场,以及平台智能化、数字化的迭代升级。 据了解,兰格成立于2017年,专注服务钢铁行业2

    06-18

  • 恒大已安排136亿港元自有资金提前偿还美元债本息

    恒大已安排136亿港元自有资金提前偿还美元债本息

    据6月24日消息,今日,中国恒大发布公告称,已安排约136亿港元自有资金偿还美元债本息。 1亿港元转入债券偿还账户,用于偿还本年度债券偿还账户。 6月28日到期的14.5亿美元债券以及全部到期境外美元债到期应付利息近3亿美元,合计约17.5亿美元。 至此,恒大今年3月之前将无境

    06-17

  • B2B医药营销平台“药师帮”完成新一轮融资2.7亿美元

    B2B医药营销平台“药师帮”完成新一轮融资2.7亿美元

    B2B医药营销平台“药师帮”近日完成新一轮融资2.7亿美元。 本轮融资参与方包括珠江投资、百度、阳光保险、松鹤资本、广州基金及某国家主权基金等。 本轮融资将主要用于合同履约各环节的技术升级、药企院外市场数字化营销系统的迭代与建设、药店专业服务场景的数据共享平台建设

    06-18

  • 重庆200亿资金来了

    重庆200亿资金来了

    重庆越来越热闹了。 投资界-Decode LP获悉,近日,重庆两江新区国有企业共同投资设立高质量发展产业投资基金,总金额1亿元,重点关注重点行业技术创新引导投资和重大项目,推动新区乃至重庆产业高质量发展。 据悉,本次母基金总规模1亿元,投资采取“母基金+重大项目直投+专项

    06-18

  • 诞生125年后,圆形方向盘即将变成方形?

    诞生125年后,圆形方向盘即将变成方形?

    前段时间,丰田公布了bZ纯电动专属系列首款车型bZ4X的详细信息。 新车定位中型纯电动SUV,车身尺寸与RAV4类似。 新车的外观我大致了解了一下。 它与8个月前上海车展上展示的概念车没有什么不同。 虽然值得肯定,但也在情理之中。 真正让我惊讶的是方向盘——它采用了异形方向

    06-21

  • 特殊材料替代硅制造半导体薄膜

    特殊材料替代硅制造半导体薄膜

    据美国《每日科学》网站9日报道,美国麻省理工学院(MIT)的工程师近日研发出一项新技术。 他们用一批特殊材料代替硅,制造出超薄半导体薄膜。 新技术为科学家提供了制造柔性电子器件的低成本解决方案,所得电子器件的性能将优于现有硅基器件,有望在未来智慧城市中“大展拳脚

    06-06

  • 2020年我不再开店了

    2020年我不再开店了

    粥店被房东拿走后,王叶松了一口气。 “店铺转让”已经发布近一个月了,却没有人关注。 疫情虽然散去,但线下业务依然没有起色。 王叶没有承担每月高昂的费用,最终无奈选择及时止损,直接取消租约。 此前,他和他的网红粥店已经苦苦挣扎了三个月。 下半年,带着上次“网红煎

    06-17

  • 比亚迪:子公司拟出资3亿美元参与投资基金

    比亚迪:子公司拟出资3亿美元参与投资基金

    据10月8日消息,比亚迪宣布,旗下子公司Golden Link拟出资3亿美元参与投资基金Community Fund LP。 预计募资规模不超过6亿美元,主要投资科技、医疗创新等领域的优秀子基金。

    06-17