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

准备工作：

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

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

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

 

步骤开始：

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

 

2：先实现图片的显示

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

 

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

 

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

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

<view class="index-container">
<image class="logo"src="/pages/images/4.gif"></image>     /*images后的图片文件名称根据实际命名填写，请勿和我相同*/
</view>

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

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

运用到 bindtap事件属性

<view class="primay" bindtap="goNews1Tap">             /*view命名为primay，运用到 bindtap事件属性并将其命名为goNews1Tap*/
<text class="primay-text">点我</text>       /*命名文本文件为primay-text并添加文本内容：点我*/
</view>

 

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

 

9:目的效果

 

 

代码部分

需要修改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文件其中点击编译即可改变按钮外观

效果达到了

 

 

 

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

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

代码部分:

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

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

 

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

 

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

代码部分:

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

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

 

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

 

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

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

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

效果如下:

 

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

代码如下

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

 

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

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