第一次学习小程序

csdn博客文章NO.9

---

前言

          由于公司的业务发展需要，我不得不马上习得一门新的技能，那就是微信小程序。接触微信小程序，我觉得有些地方还是比较麻烦的，特别是文件比较多，json，wxss，wxhl，js。可能是这段时间一直在写flutter代码。样式，布局，业务逻辑可以一起写，这种感觉非常的方便。另一方面就是小程序封装的太死，这点很难受。在写tabbar的时候，直接是配置化的，这点难以接受，慢慢习惯吧！话不多收，直接总结知识点，其实官方文档上面写的已经非常，非常，非常的清楚了！

---

一、配置Tabbar？

首先是对Tabbar的配置，里面的属性很见明只意Tabbar可以是在底部很导航栏的下方，在顶部的导航栏没有icon

在json文件里面不允许注释

{ 
  //告诉小程序有管理有那些页面，第一个会是刚进来的页面
  "pages":[   
    "pages/index/index",
    "pages/demo02/demo02",
    "pages/demo01/demo01",
    "pages/search/search",
    "pages/shopping/shopping",
    "pages/mine/mine",
    "pages/logs/logs"
  ],
  //这个是窗口配置项
  "window":{
    // 下拉loading的样式
    "backgroundTextStyle":"dark",
    //最顶部导航栏的背景颜色
    "navigationBarBackgroundColor": "#fff",
    //标题
    "navigationBarTitleText": "润龙购物",
    //标题颜色，只能是黑色和白色
    "navigationBarTextStyle":"black",
    //是否开启刷新
    "enablePullDownRefresh": true
  },
   "tabBar": {
   //四个导航项
     "list": [
       {
       //页面
       "pagePath": "pages/index/index",
       //icon下面的文字
       "text": "首页",
       //图标
       "iconPath": "icons/home.png",
       //选中的图标
       "selectedIconPath": "icons/select-home.png"
     },
     {
      "pagePath": "pages/shopping/shopping",
      "text": "商品",
      "iconPath": "icons/shopping.png",
      "selectedIconPath": "icons/select-shopping.png"
    },
    {
      "pagePath": "pages/search/search",
      "text": "搜索",
      "iconPath": "icons/search.png",
      "selectedIconPath": "icons/select-search.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "icons/mine.png",
      "selectedIconPath": "icons/select-mine.png"
    }
    ],
    //选中的字体颜色
    "color": "#666666",
    //没有选中的字体颜色
    "selectedColor": "#333333"
   },
  "style": "v2",
  //这个可要可不要，是一些关闭小程序的配置信息
  "sitemapLocation": "sitemap.json"
}

swiper的使用

wxss样式

//100vw == 100%
swiper{
  width: 100%;
  height: calc(100vw * 280 / 520);
}

image{
 width: 100%
}

//autoplay = "true" ：是否开启自动轮播。默认为false
//indicator-dots="true" 是否显示指示图标，默认为false
//indicator-color = "#fff" 没有轮播到的指示颜色
//indicator-active-color = "#A9A9A9" 轮播到的指示颜色
<swiper autoplay = "true" indicator-dots="true" indicator-color = "#fff" indicator-active-color = "#A9A9A9">                            
  <swiper-item>
    <image src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/> 
  </swiper-item>
  <swiper-item>
      <image src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/> 
    </swiper-item>
  <swiper-item>
      <image src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"/> 
    </swiper-item>
</swiper>

数据绑定

wxml

//点击事件和input输入
<input type="text" bindinput="handleInput"/>
<button data-hi="{{1}}" bindtap="tapName">-</button>
<button data-hi="{{-1}}" bindtap="tapName">+</button>
<view>{{num}}</view>

js

Page({
  data: {
    value:"",
    num:0
  },
  handleInput:function(e){
    console.log(e)
  },
  tapName: function(event) {
    this.setData({
      num : this.data.num+event.currentTarget.dataset.hi
    })
  }
})

富文本

<rich-text nodes="{{html}}"></rich-text> 

总结

今天学的有点昏昏的，但是比第一天学flutter的时候，学的知识点还是要多一点。