很开心暑假有这么一个机会可以接触小程序,张小龙提出这么一个设计,可以说是非常厉害,暂不说微信小程序将来有没有前景,万一就成功了呢?对吧
我感觉写前端的话,有一定基础还是不难看懂代码的,就是在H5的基础上加以修改(web前端设计厉害的大神玩起来应该是得心应手)
前两天我左后的小哥给我发了个界面图让我试着做一下,之前上学期学的最好的一门也算是H5了,看小程序界面时,真是有些似懂非懂
对着别人的简单案例敲两遍,其实大概也就能懂了。
1 先下载一个微信小程序的开发者工具,这个很好下载的,直接确定好放哪里然后下一步——
链接: https://pan.baidu.com/s/1bpvnuQr 密码: 3j7v
2 首次登录用自己的微信扫一下
3 AppID:(我选的是无)
项目名称:想个英文之类 类似:test
项目目录:最好和上面的名称一样 类似:D:xxx est
4 进去之后,有个初始页面,可以删掉(具体很多大神还有贴图讲)
最上面我用了三个图片做成跑马灯形式(个人感觉这样逼格满满)
代码分享如下:-index.wxml
(view是个容器的意思,类似于H5中的div。swiper滑块视图模块。这里的三张图片是png格式,是网络图片估计可能只有联网才能看到)
-index.css
@keyframes kf-marque-animation{ 0%{transform: translateX(0);}100%{ transform: translatex(-33.3%)}}
.slide-image{
height:300rpx;
100%;
}
-index.js(脚本下)
Page({
data: {
imgUrls: [
'http://img06.tooopen.com/images/20170718/tooopen_sy_217109156516.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
autoplay:true,
interval: 5000,
duration: 1000
}
(这里的http:、、、,就是来自网页的图片,你想用别的图就改下地址就可以了)
脚本这块我不是很熟,也是照别人的代码修改的,如果本文中有什么讲错的地方,希望大家在底下留言,一起修仙啊哈哈!
https://github.com/zce/weapp-demo
(我之前就照这个学习的,讲的很详细)