微信小程序常用知识点总结

1.在app.json中修改启动页面

 `"entryPagePath": "pages/index/index"`

2.在app.json中修改页面属性

"window":{
    "backgroundTextStyle":"light",//导航栏字体样式
    "navigationBarBackgroundColor": "#fff",//导航栏背景颜色
    "navigationBarTitleText": "Weixin",//导航栏字体内容
    "navigationBarTextStyle":"black"//导航栏字体颜色
  },

3.底部菜单配置

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/img/shouye.png",
      "selectedIconPath": "/img/shouye2.png"
    },{
      "pagePath": "pages/xinping/xinping",
      "text": "分类",
      "iconPath": "/img/xinping.png",
      "selectedIconPath": "/img/xinping2.png"
    },{
      "pagePath": "pages/guang/guang",
      "text": "逛",
      "iconPath": "/img/guang.png",
      "selectedIconPath": "/img/guang2.png"
    },{
      "pagePath": "pages/gouwuche/gouwuche",
      "text": "购物车",
      "iconPath": "/img/gouwuche2.png",
      "selectedIconPath": "/img/gouwuche.png"
    },{
      "pagePath": "pages/wode/wode",
      "text": "我的",
      "iconPath": "/img/wode2.png",
      "selectedIconPath": "/img/wode.png"
    }]
  }

4.轮播图：

 <swiper indicator-dots indicator-color="#000"  indicator-active-color="red" interval="1000" autoplay circular  >
    <swiper-item>
      <image src="../../images/001.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/001.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/001.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/001.png"></image>
    </swiper-item>
  </swiper>

5.九宫格轮播图：

html

<view class="v5">
  <swiper indicator-dots='true'>
    <swiper-item>
      <view class="v51">
        <block wx:for="{{lbt1}}">
          <view>
            <image src="{{item.src}}"></image> 
            <text>\n {{item.ch}}</text>
          </view>
        </block>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="v51">
        <block wx:for="{{lbt2}}">
          <view>
            <image src="{{item.src}}"></image> 
            <text>\n {{item.ch}}</text>
          </view>
        </block>
      </view>
    </swiper-item>
  </swiper>
</view>

js

lbt1:[
      {src:'../../img/01.png',ch:'西瓜'},
      {src:'../../img/02.png',ch:'冰棒'},
      {src:'../../img/03.png',ch:'对虾'},
      {src:'../../img/03.png',ch:'汉堡'},
      {src:'../../img/03.png',ch:'面包'},
      {src:'../../img/06.png',ch:'樱桃'},
      {src:'../../img/07.png',ch:'饮料'},
      {src:'../../img/08.png',ch:'口红'},
      {src:'../../img/09.png',ch:'蜂蜜'},
      {src:'../../img/10.png',ch:'水杯'},
    ],
    lbt2:[
      {src:'../../img/11.png',ch:'666'},
      {src:'../../img/12.png',ch:'冰棒'},
      {src:'../../img/13.png',ch:'对虾'},
      {src:'../../img/14.png',ch:'汉堡'},
      {src:'../../img/15.png',ch:'面包'},
      {src:'../../img/16.png',ch:'樱桃'},
      {src:'../../img/17.png',ch:'饮料'},
      {src:'../../img/18.png',ch:'口红'},
      {src:'../../img/19.png',ch:'蜂蜜'},
      {src:'../../img/20.png',ch:'水杯'},
    ]

css：

.v5{
  width: 90%;
  margin: 10px auto;
  height: 100px;

}
.v5 .v51{
  display: flex;
  flex-wrap: wrap;
}
.v5 .v51 view{
  width: 20%;
  height: 50px;
  text-align: center;
  font-size: 12px;
}
.v5 .v51 view image{
  width: 70%;
  height: 50%;
}

6.模板的使用：
https://blog.csdn.net/ziyue13/article/details/121449381

7.请求网络数据：

wx.request({
      url: 'http://10.10.198.12:8088/news/getproducts.php', //仅为示例，并非真实的接口地址
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
        var code=res.data.code;
        if(code=="200"){
              //把商品数据赋值给一个变量
              that.setData({
                productlist:res.data.data
              });
        }
        else{
          console.log("数据访问错误");
        }
      }
    })
 
  },

8.map地图的使用：

HTML：

<view>
  <map class="map" scale="19" latitude="33.636563" longitude="114.684444"
   markers="{{markers}}"
  ></map>
</view>

js：

data: {
    markers:[{
      iconPath: "../../images/my3.png",
      id: 0,
      latitude: 33.636563,
      longitude: 114.684444 ,
      width: 50,
      height: 50
     }
    ]
 },

9.点击事件：

<button  bindtap="go">到这里来</button>

go:function(e){
	//获取绑定事件的元素
	console.log(e.target);
}

10.页面传递数据的方法：

（1）：使用缓存：

var k = this.data.shuju;
  //设置某个缓存
  wx.setStorage({
    key: 'key',
    data: k
  })
  
  //获取缓存
  wx.getStorage({
    key: 'key',
    success(res) {
      console.log(res.data)
    }
  })

（2）：使用reLaunch跳转页面时获取

<button bindtap="test">66</button>
test:function(){
    wx.reLaunch({
      url: '/pages/wode/wode?id=2&name=666',
    })
    
  },

在/pages/wode/wode获取数据：

onLoad:function(e) {
    console.log(e);
  }

（3）：全局变量

index js：

App({
      globalData: {
        title: 'tomatocc'
      }
    })

wode.js

var name = getApp().globalData.title;
    console.log(name);