本帖最后由 单片小菜 于 2022-4-21 10:55 编辑
#申请原创# 引：
上次的小程序已经完成了Hello world，并且在手机上可以直接看到这组字符串，究竟是怎么显示出来的，显示的方法有哪些呢，我们一起继续学习下去，文字在界面中如何显示，显示的方法有几种。
一、微信开发者工具的目录树架构
我们先来认识一下里面有几个文件，各个文件都是做什么用的。
主体部分主要三个文件组成： <span class="code-snippet__selector-tag" style="outline: 0px; max-width: 1000%; color: rgb(202, 125, 55); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"="">app</span><span class="code-snippet__selector-class" style="outline: 0px; max-width: 1000%; color: rgb(51, 51, 51); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"="">.json</span><span style="color: rgb(51, 51, 51); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);"=""> //小程序的公共配置文件，必须要有的</span>
<span class="code-snippet__selector-tag" style="outline: 0px; max-width: 1000%; color: rgb(202, 125, 55); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"="">app</span><span class="code-snippet__selector-class" style="outline: 0px; max-width: 1000%; color: rgb(51, 51, 51); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"="">.wxss</span><span style="color: rgb(51, 51, 51); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);"=""> //小程序的公共样式表文件，非必须要有的</span>
小程序可以有多个页面文件，包含在多个页面文件夹中，上面的图片只是一个Pages页面的文件夹，还可以多建立几个页面文件夹。每个页面文件夹都包含四个文件。 <code style="outline: 0px; max-width: 1000%; display: flex; position: relative;" liberation="" mono",="" menlo,="" courier,="" monospace;="" box-sizing:="" border-box="" !important;"=""><span class="code-snippet_outer" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;"><span class="code-snippet__selector-tag" style="outline: 0px; max-width: 1000%; color: rgb(202, 125, 55); box-sizing: border-box !important;">xxx</span><span class="code-snippet__selector-class" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">.wxml</span> //页面结构文件，必须的</span></code><code style="outline: 0px; max-width: 1000%; display: flex; position: relative;" liberation="" mono",="" menlo,="" courier,="" monospace;="" box-sizing:="" border-box="" !important;"=""><span class="code-snippet_outer" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;"><span class="code-snippet__selector-tag" style="outline: 0px; max-width: 1000%; color: rgb(202, 125, 55); box-sizing: border-box !important;">xxx</span><span class="code-snippet__selector-class" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">.json</span> //页面配置文件，非必须的</span></code><code style="outline: 0px; max-width: 1000%; display: flex; position: relative;" liberation="" mono",="" menlo,="" courier,="" monospace;="" box-sizing:="" border-box="" !important;"=""><span class="code-snippet_outer" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;"><span class="code-snippet__selector-tag" style="outline: 0px; max-width: 1000%; color: rgb(202, 125, 55); box-sizing: border-box !important;">xxx</span><span class="code-snippet__selector-class" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">.wxss</span> //页面样式表文件，非必须的</span></code>
下面我们新建一个页面文件，操作步骤如下：
将文件夹起名“123”
按照上图进行设置，会得到如下的文件夹。
我们想要编译哪个文件夹，就在如下位置进行选择。
点击添加编译模式，将启动界面设置为：
这样在编译的时候，就直接编译刚刚建立的123页面文件了。
注意：老刘遇到建立好文件夹之后，找不到新建文件夹的情况，重新下载了微信开发者工具之后，解决这个问题了。可能由于软件本身的问题。
二、界面显示文字的三种形式
我们可以在123.wxml文件中直接添加如下指令： <!--pages/123/123.wxml-->
<span class="code-snippet__tag" style="outline: 0px; max-width: 1000%; color: rgb(14, 156, 229); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"=""><<span class="code-snippet__name" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">text</span>></span><span style="color: rgb(51, 51, 51); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);"="">第一种方式，直接书写形式。</span><span class="code-snippet__tag" style="outline: 0px; max-width: 1000%; color: rgb(14, 156, 229); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"=""></<span class="code-snippet__name" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">text</span>></span>
2. 通过变量传递的方式进行显示：
我们在123.js文件中，data中增加一个变量i，对于小白的我们而言，注意写法。不然编译不通过，寻找bug会很麻烦。
添加绿色框中的一行之后，在123.wxml文件中进行变量传递。 <!--pages/123/123.wxml-->
<span class="code-snippet__tag" style="outline: 0px; max-width: 1000%; color: rgb(14, 156, 229); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"=""><<span class="code-snippet__name" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">text</span>></span><span style="color: rgb(51, 51, 51); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);"="">{{i}}</span><span class="code-snippet__tag" style="outline: 0px; max-width: 1000%; color: rgb(14, 156, 229); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"=""></<span class="code-snippet__name" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">text</span>></span>
注意，这里的双大括号，老刘在编译的时候，总是不过，最终发现是写法的问题。还有变量定义的时候，“ ：”、引号的使用，需要习惯。
3.通过this.setData的方式传递
在data中对变量a进行初始化为空：
在onLoad函数中增加如下指令：
最后在123.wxml中进行展示 <!--pages/123/123.wxml-->
<span class="code-snippet__tag" style="outline: 0px; max-width: 1000%; color: rgb(14, 156, 229); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"=""><<span class="code-snippet__name" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">text</span>></span><span style="color: rgb(51, 51, 51); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);"="">{{a}}</span><span class="code-snippet__tag" style="outline: 0px; max-width: 1000%; color: rgb(14, 156, 229); font-family: Consolas, " liberation="" mono",="" menlo,="" courier,="" monospace;="" font-size:="" 14px;="" letter-spacing:="" 0.544px;="" white-space:="" pre;="" background-color:="" rgba(0,="" 0,="" 0.03);="" box-sizing:="" border-box="" !important;"=""></<span class="code-snippet__name" style="outline: 0px; max-width: 1000%; box-sizing: border-box !important;">text</span>></span>
三、延伸onLoad及其它几个函数使用场景
a、小程序注册完成后，加载页面，触发onLoad方法。
b、页面载入后触发onShow方法，显示页面。 c、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。 d、当小程序后台运行或跳转到其他页面时，触发onHide方法。 e、当小程序由后台进入到前台运行或重新进入页面时，触发onShow方法。 f、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。
四、手机上将三种方式预览一下
结：
一天一点小知识，慢慢积累，生活充满节奏感。
|
楼主
标题置顶
标题高亮
