微信小程序入门（四）：页面数据展示

Posted 2023-04-17

参考技术A 大家都知道，针对一款app上面都是展示信息的，那么在小程序中，页面上信息的展示是如何的，接下来进行详细探索：

在微信小程序中，编写页面布局是在wxml文件中进行的，则在wxml文件中，使用<view></view>标签进行内容的包裹，类似html中的<div>,现在进行一个需求的编写，在页面上编写布局，并将.js结尾文件中的处理数据进行展示到页面上；

index.wml

index.js

编译项目，则页面展示如下：

从上面结果可以知道在wxml文件中使用**可以将js文件中指定的内容展示在页面上，现在我们进行动态的展示数据，不需要展示起在page-data中固定的内容,修改js文件内容:

编译项目，显示结果如图：

由此可知，在js中动态的设置内容并将其更新到wml上，则使用 this.setData()，且修改的内容格式符合key:value。

就小程序页面数据展示就分析到这里，希望各位看官们有所收获，有什么错误的地方还望指出！！

微信小程序 base64格式图片的展示保存及pdf打开

参考技术A src属性添加data:image/png;base64
（注意：若imgData返回数据中含有data:image/png;base64,时，src直接写src="imgData"即可）

显示不出来，有一种原因是因为返回的base64的数据中存在回车换行，需要回车换行替换为''即可。

（注意：若imgData返回数据中含有data:image/png;base64,时，data参数需要写成：imgSrc.slice(22)，意思为：这里是把 data:image/png;base64, 这一段去除）

用wx.base64ToArrayBuffer（）将 Base64 字符串转成 ArrayBuffer 对象并去空格，再写入文件，最后打开。