码迷,mamicode.com
首页 > 微信 > 详细

极速微信小程序开发,第一天

时间:2017-03-18 01:07:46      阅读:333      评论:0      收藏:0      [点我收藏+]

标签:border   margin   验证   blog   小项目   ica   block   查看   广告   

收到xx平台的合同确认的短信后,下午把手上的事情理完后。Get一项新技能
之前和微信相关的单都是转出去给人家做,许久没有打代码了,前端的技术也忘的差不多了。还好现在项目选型的时候,通过讨论最终明确下来,采用时下流行的框架。如Vue,Angural,后端采用了go语言

一直认为微信就是js调用接口的玩意,使用微信封装好的公共方法来快速开发微信网站及小程序。看官们不要相信我的片面之词

还是从先从微信官方指引入手,第一感觉内容很简洁,配上了图,理解起来就更方便了。

今天我主要回顾一下,为了快速消化这个单。大家也可以在小程序里面搜索 房产评估,招商银行的。这次的小项目就是仿他做一个,主题颜色为绿色

需求也是比较简单,两个页面,房屋信息提交页面包括(广告图切换,联动省市地区,详细地址,面积,楼层),客户信息提交页面包括(姓名,手机号码,验证码)这个页面主要是为了防止客户乱搞,特意加了手机号码验证,附加一个web网站可以查看客户提交的资料,这块是有现成的php网站
开发时间当时定了一个星期
项目背景我就不描述了。

开发工具官网下载吧,不过这个开发工具,需要微信扫码才能创建我的第一个项目。

已经把小程序API扫一遍,第一步主要是想把图片轮换搞定,当时看完小程序API没有一点实现的思路。
微信小程序也火了一阵子,想着网上应该也有一些案例或者简单的Demo,API里面的也有Demo不过都是静态网站。还是去网上Down了一批,不过多数是微信Demo改出来的,小伤心。。。。

在这批里面,找到了一个外卖平台的Demo,刚好有图片轮换,这下我开心了。看了看代码,原来就是几个属性的设置就解决了。图片可以保存到本地,也可以使用网络图片

下面附上代码

页面代码

<view class="container flex-wrap flex-direction-col">
  <view class="my-swiper">
      <swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" height="150"/>
      </swiper-item>
    </block>
  </swiper>
  </view>
</view>

样式代码

.my-swiper image{
  width: 100%;
}

.wrap-button{
	line-height: 1.5rem;
	display: inline-block;
	border-bottom: 1px solid red;
	background-color: red;
	width:8rem;
	height: 1.5rem;
	vertical-align: bottom;
	margin-left: 1rem;
}

js代码

Page({
  data: {
    imgUrls:[{"图片地址"}],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000
  }
})

最后也带上小程序首页图片,后面接着更新

技术分享

极速微信小程序开发,第一天

标签:border   margin   验证   blog   小项目   ica   block   查看   广告   

原文地址:http://www.cnblogs.com/kengwfpzu920/p/6569222.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!