微信小程序-显示图片并添加按钮加跳转

准备工作

首先,你必须注册了微信小程序账户和安装了微信开发者工具,如果没有,请参考麻木博客官网:微信小程序初章-注册微信小程序账户及安装微信小程序开发者工具篇

显示图片并添加按钮加跳转 

效果:去掉微信登陆增加按钮,点击按钮跳转到另一界面,显示轮播图,并支持跳回主页

 

步骤开始:

1:步骤开始:删除pages/index/index.wxml中的所有代码,等待写入新代码。

微信小程序-显示图片并添加按钮加跳转_第1张图片

 

2:先实现图片的显示

点击右上角的详情查看项目文件存放目录,点击打开

微信小程序-显示图片并添加按钮加跳转_第2张图片微信小程序-显示图片并添加按钮加跳转_第3张图片

 

4:返回微信开发者平台会发现pages目录下多了一个images文件夹,点击其中的图片也可以预览,就是刚才添加的图片和GIF文件

微信小程序-显示图片并添加按钮加跳转_第4张图片

 

5:既然图片的问题解决了,就到了引用部分,开始打代码了。。。

在pages/index/index.wxml文件中编辑代码,将原来代码删了,输入以下代码:运用到了 images图片属性以及 view视图容器属性代码


     /*images后的图片文件名称根据实际命名填写,请勿和我相同*/

微信开发者工具是支持自动补齐代码的,在输入代码关键字会跳出相关代码,点击回车会自动补齐代码噢!

微信小程序-显示图片并添加按钮加跳转_第5张图片

7:接下来继续在view中加入view视图属性代码并添加按钮的代码

运用到 bindtap事件属性

             /*view命名为primay,运用到 bindtap事件属性并将其命名为goNews1Tap*/
点我       /*命名文本文件为primay-text并添加文本内容:点我*/

 

8:发现显示了刚才设置的文字:点我,但是不好看,需要优化显示效果

微信小程序-显示图片并添加按钮加跳转_第6张图片

 

9:目的效果

微信小程序-显示图片并添加按钮加跳转_第7张图片

 

 

代码部分

需要修改pages/index/index.wxss文件,删除原来文件的自带代码加入一些新代码,使按钮的文字外观达到一定的美化效果!

需注意primay是自行设置的名称,自行操作时请根据实际名称进行设置

.index-container{
display: flex;
flex-direction: column;/*垂直布防*/
align-items: center; /*位置居中*/
color: black ;
}

.logo {
width: 620rpx;
height: 436rpx;
margin-top: 1rpx;
}
.primay {                         /*****按钮布局********/
margin-top: 100rpx;             /*按钮 在界面的位置,值越大越下方*/
border: 5px  solid #00BFFF;   /*按钮边框 粗细及颜****/
border-radius: 10px;            /*按钮边框 弧度形状调整*/
padding: 10px 10px;             /*按钮边框 与 内部字体间距调整*/
}

.primay-text{
font-size: 50rpx;               /*按钮 内字体大小*/
color: black;               /*按钮 内字体颜****/
}

 

将上方代码加入pages/index/index.wxss文件其中点击编译即可改变按钮外观

效果达到了

 

 

微信小程序-显示图片并添加按钮加跳转_第8张图片

 

设置按钮的点击跳转代码部分

目的:点击 点我 按钮跳转到别的界面

代码部分:

前往utils/app.json文件,在pages属性中添加一段代码

"pages/h2/h2",   //h2并非固定名称可以自行自定义,如aa,bb。。。,记得在末尾加入逗号,微信小程序代码规则只有最后一行不用加逗号!

 

添加完成后点击编译,会发现pages目录下多了一个h2文件夹,h2文件夹下也有相应文件

微信小程序-显示图片并添加按钮加跳转_第9张图片

微信小程序-显示图片并添加按钮加跳转_第10张图片

 

目的:点击 点我按钮跳转到h2界面

代码部分:

1:在pages/index/index.js文件中加入以下代码

Page({
goNews1Tap: function (event) {       /*跳转到h2页面 关键代码*/
wx.navigateTo({
url: '../h2/h2',                          /*指定跳转到h2界面*/
})
}
})

 

2:点击编译后点击  点我按钮  跳转到h2界面

微信小程序-显示图片并添加按钮加跳转_第11张图片

 

3:只显示了目录文字。这是正常的。默认文字就是显示当前文件的所在目录路径

会改主页,这个当然就不难了,就可以复制主页index.wxml的代码到h2的wxml实现相同功能,

当然wxss代码也是要复制过去,美化显示效果!

效果如下:

微信小程序-显示图片并添加按钮加跳转_第12张图片

 

4:如果想要实现返回主页功能,h2的h2.js也是要添加按钮指向目录的

代码如下

Page({
goNews1Tap: function (event) {       /*跳转到主界面页面 关键代码*/
wx.navigateTo({
url: '../index/index',                          /*指定跳转到index主界面界面*/
})
}
})

 

5:为了做出比较。我更改了图片,可以查看明显的效果

微信小程序-显示图片并添加按钮加跳转_第13张图片

就是这么的简单,不知道看了的朋友学会了吗,如有不懂得可以给我留言询问噢!

 

你可能感兴趣的:(小程序)