准备工作:
首先,你必须注册了微信小程序账户和安装了微信开发者工具,如果没有,请参考麻木博客官网:微信小程序初章-注册微信小程序账户及安装微信小程序开发者工具篇
显示图片并添加按钮加跳转
效果:去掉微信登陆增加按钮,点击按钮跳转到另一界面,显示轮播图,并支持跳回主页
步骤开始:
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:为了做出比较。我更改了图片,可以查看明显的效果
就是这么的简单,不知道看了的朋友学会了吗,如有不懂得可以给我留言询问噢!
最后附上原源码:
编辑:麻木
发表评论