bilibili微信小程序开发学习总结

bilibili微信小程序开发学习总结

用来半天学习了微信小程序模仿做了个B站小程序，其实如果有编程基础特别熟悉Vue语法与web的话那小程序基本就是随便玩玩，整体写法与vue一致，页面搭建与web也是相似的。

小程序结构

小程序每个页面一般由四个文件组成：.wxml、.wxss 、.js、.json

1. wxml : wxml就是页面，相当于web的HTML
2. wxss : wxss为页面样式文件，相当于web的css文件，写法也都一致
3. js : JavaScript文件，控制页面逻辑与数据绑定
4. json : json文件，这是相对web唯一多出来的一个文件，这是用来定义页面属性的

wxml

wxml相比与HTML没有太大区别，只是标签名与属性进行了替换并且微信还封装了一些常用的功能组件。

常用标签

• <view> view标签没什么特殊功能，相当于div标签
• <navigator> 用于页面跳转，url属性定义跳转链接
• <scroll-view > 用于定义滚动区域
• <swiper> 定义滑块视图，可以做出轮播图
• <text> 文本标签
• <input> 输入框

语法
小程序框架还提供了一些特殊的wxml语法，其实跟vue语法是差不多的。

• 绑定数据 {{}}

wxml的数据绑定实现与vue一样用{{}}将数据包裹起来就可以了
<view> {{ message }} </view>

• 循环渲染 wx:for

swiper标签为滑块视图，
在swiper-item中加入 wx:for="{{swiperList}}" 循环追加图片数据
<swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}">
   <swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
       <navigator >
           <image mode="widthFix" src="{{item.imgSrc}}" />
       </navigator>
   </swiper-item>
</swiper>

wxss

wxss没什么可介绍，写法与css一模一样，获取元素也是使用class
rpx ： wxss写样式有一个新的单位叫rpx，它固定屏幕框为750px,也就是如果元素设置宽度为375rpx，那么不管是在怎样的像素设备上，它都会占整个屏幕的一半，这样就很方便的解决了不同设备屏幕的自适应问题。

js

微信小程序的js在创建时就会有基础的结构与注释，只需要在相应的地方写自己的事件处理就好了。

下面是获取bilibili首页导航数据的一段代码
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //首页导航数据
    navList:[],
    //被点击选中的导航索引
    currentIndexNav:0,
    //轮播图数据
    swiperList:[],
    //视频列表数据
    videosList:[]
  },
  //获取首页导航数据
  getNavList(){
      let that=this;
      //利用小程序内置发送请求的方法
      wx.request({
        url:"https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList",
        success(res){
          console.log(res);
          if(res.data.code==0){
            that.setData({
              navList:res.data.data.navList
            });         
          }
        }
      });
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //1.获取首页导航数据
    this.getNavList();
  }
})

json

json文件可以定义当前页面的标题等属性

app.json 全局配置
{
  "pages": [ //程序的所有页面
    "pages/index/index", 
    "pages/logs/logs",
    "pages/detail/detail"
  ],
  "window": { //标题样式
    "backgroundTextStyle": "light",//下拉样式
    "navigationBarBackgroundColor": "#fff",//标题背景颜色
    "navigationBarTitleText": "WeChat",//标题
    "navigationBarTextStyle": "black"//文字颜色
  },
  "sitemapLocation": "sitemap.json"
}