2018_3_7学习总结日志

最近算是入门了微信小程序的小程序端吧，因为大一学习过html+css，然后再补一些js知识就去捣鼓了，我觉得这是学习的比较快的方法吧，实践出真知哈哈。贴个目前的效果图先，然后说一下我的做法

• 
  多参考官方文档
  
• 
  到github等地方下载一些demo项目看别人的源码
  
• 
  看清wxml的结构，然后wxss一部分一部分的删除，看对应影响的位置，再修改
  
• 
  js的逻辑注意看wxml中的bindtap
  
• 
  util.js放一些需要复用的代码，然后需要模块导出才行
  
• 
  app.wxss放一些全局样式
  

微信小程序顶部轮播图

<!--index.html-->
<swiper indicator-dots="{
   {
   indicatorDots}}"
  autoplay="{
   {
   autoplay}}" interval="{
   {
   interval}}" duration="{
   {
   duration}}"
  style="height:110px">
  <block wx:for="{
   {
   imgs}}">
    <swiper-item>
      <image src="{
   {
   item}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>

这个组件的详细介绍官方文档介绍的很清楚，我就不赘述了，链接在这

官方文档


值得一提的是swiper的wxss是在底层框架就写好了的，所以可以不写wxss，但我尝试改变高度也不行，网上搜索后知道了可以加上

style="height:110px"

的样式来控制高度。

<!--index.js-->
Page({
  data: {
    imgs: [
   'http://img1.ph.126.net/cklMeYA02CjMLCfn7Vde0Q==/1600466717677148080.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 600
  }
})

将轮播图要展示的图片以url的形式放在data中的一个数组里面，indicatorDots是指示点，autoplay是否自动播放，interval自动播放的时间间隔，duration滚动动画的时间

微信小程序搜索栏

<!--index.wxml-->

<view class="weui-search-bar">
    <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
            <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{
   {
   inputVal}}" focus="{
   {
   inputShowed}}