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

Posted 2020-09-05

收到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
  }
})

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