微信小程序开发

1.官网https://mp.weixin.qq.com

2.开发工具下载：

image.png

如果下载的64位打不开 建议下载32位

3.下载之后安装开发工具然后打开开发工具

微信小程序开发者工具是不支持打开vue项目的 所以我们使用mpvue框架

4.Mpvue：美团开发的基于vue框架的微信小程序开发框架
打开命令行： vue init mpvue/mpvue-quickstart my-project 下载mpvue项目模板

image.png

5.实践：
全局配置:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

image.png

5.1.页面必须在app.json下注册：

  "pages": [
    "pages/home/main",
    "pages/shop/main",
    "pages/order/main",
    "pages/directbuy/main",
    "pages/search/main",
    "pages/myorder/main",
    "pages/comment/main",
    "pages/commentinfo/main",
    "pages/newcomment/main",
    "pages/me/main",
    "pages/editmyinfo/main",
    "pages/bookinfo/main",
    "pages/mycollect/main",
    "pages/mycommentmessage/main",
    "pages/myinfo/main",
    "pages/goodsinfo/main",
    "pages/address/main",
    "pages/cart/main",
    "pages/addaddress/main",
    "pages/logs/main"
  ],

5.1.小程序底部tabBar：

 "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#EA5149",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "./static/images/index/book-active.png",
        "iconPath": "./static/images/index/book.png",
        "pagePath": "pages/home/main",
        "text": "首页"
      },
      {
        "selectedIconPath": "./static/images/index/comment-active.png",
        "iconPath": "./static/images/index/comment.png",
        "pagePath": "pages/comment/main",
        "text": "消息"
      },
      {
        "selectedIconPath": "./static/images/index/shop-active.png",
        "iconPath": "./static/images/index/shop.png",
        "pagePath": "pages/shop/main",
        "text": "商城"
      },
      {
        "selectedIconPath": "./static/images/index/me-active.png",
        "iconPath": "./static/images/index/me.png",
        "pagePath": "pages/me/main",
        "text": "我的"
      }
    ]

5.2.获取用户授权：

      var _this = this;
      // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
      wx.getSetting({
        success(res) {
          //如果没有同意授权,打开设置
          if (!res.authSetting["scope.userLocation"]) {
            wx.openSetting({
              success: res => {
                // 用户授权之后调用获取城市
                _this.getCityName();
              }
            });
          } else {
            wx.navigateTo({
              url: "/pages/mappage/main"
            });
          }
        }
      });

5.3.定位用户地址：

   var _this = this;
      var myAmapFun = new amapFile.AMapWX({
        key: "e545e7f79a643f23aef187add14e4548"
      });
      myAmapFun.getRegeo({
        success: function (data) {
          //成功回调
          console.log(data);
          // data[0].regeocodeData.formatted_address
          // _this.cityName = data[0].regeocodeData.formatted_address;
          _this.update({ cityName: data[0].regeocodeData.formatted_address });
        },
        fail: function (info) {
          //失败回调
          console.log(info);
          //如果用户拒绝授权
          // 默认为北京
          _this.cityName = "北京市";
          _this.update({ cityName: "北京市" });
        }
      });

5.4.跳转页面

 // 前往搜索页面
    toSearch() {
      wx.navigateTo({
        url: "/pages/search/main"
      });
    },

5.5.视频播放:

<template>
  <div class="section tc">
      <!-- autoplay:自动播放 src：视频地址   enable-danmu：可以发送弹幕  danmu-list：弹幕列表  danmu-btn：是否显示弹幕的按钮-->
      <!-- initial-time:可以指定初始播放的位置  vslide-gesture:在非全屏模式下，是否开启亮度与音量调节手势 title；视频标题 -->
      <!-- enable-play-gesture：是否开启播放手势，即双击切换播放/暂停 vslide-gesture-in-fullscreen：在全屏模式下，是否开启亮度与音量调节手势 -->
      <!-- bindwaiting:视频出现缓冲时触发  binderror:视频播放出错时触发-->
    <video
    :autoplay="false"
      id="myVideo"
      src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
      enable-danmu
      :danmu-list="danmuList"
      danmu-btn
      controls
    ></video>
    <div class="btn-area">
      <!-- 替换视频按钮 -->
      <button type="primary" @click="bindButtonTap">获取视频</button>
      <input placeholder="发一条友善的弹幕" v-model="barrage" auto-focus />
      <button type="primary" @click="bindSendDanmu">发送弹幕</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      barrage: "",
      videoContext: wx.createVideoContext("myVideo"),
      danmuList: [
      {
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
    }]
    };
  },
  methods: {
    getRandomColor() {
      let rgb = [];
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16);
        color = color.length == 1 ? "0" + color : color;
        rgb.push(color);
      }
      return "#" + rgb.join("");
    },
 
    bindButtonTap: function() {
      var that = this;
      wx.chooseVideo({
        sourceType: ["album", "camera"],
        maxDuration: 60,
        camera: ["front", "back"],
        success: function(res) {
          that.setData({
            src: res.tempFilePath
          });
        }
      });
    },
    // 点击发送弹幕
    bindSendDanmu: function() {
      this.videoContext.sendDanmu({
        text: this.barrage,
        color: this.getRandomColor()
      });
    }
  }
};
</script>

<style>
@import './style.scss';
</style>

5.6.小程序底部tabBar：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo",
    "pages/person/person"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true  // 是否支持全局下拉刷新
  },
//tabBar
  "tabBar": {
    "custom" : "false" , // 是否自定义tabBar
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页"
      },
      {
        "pagePath": "pages/person/person",
        "text": "个人"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

5.7.自定义组件component：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

5.8.顶部tab：

wxml文件：
  <view class="swiper-tab">
    <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">选项一</view>
    <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">选项二</view>
    <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">选项三</view>
  </view>

  <swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange">
    <swiper-item>
      <view>页面一</view>
    </swiper-item>
    <swiper-item>
      <view>页面二</view>
    </swiper-item>
    <swiper-item>
      <view>页面三</view>
    </swiper-item>
  </swiper>

wxss文件：

.swiper-tab{
    width: 100%;  
    text-align: center;  
    line-height: 80rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.tab-item{
    flex: 1;
    font-size: 30rpx;  
    display: inline-block;   
    color: #777777;
}
.on{
    color: red;  
}
.swiper{ display: block; height: 100%; width: 100%; overflow: hidden; }  
.swiper view{  
    text-align: center; 
    padding-top: 100rpx; 
}  
js文件：
// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    winWidth: 0,
    winHeight: 0,
    currentTab: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;

    /** 
     * 获取系统信息 
     */
    wx.getSystemInfo({

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });
  },
  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  swichNav: function (e) {
    console.log(e.target.dataset.current)
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

5.9.时间处理绑定函数:

bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

image.png

点击事件：tap
长按事件：longtap
触摸事件：touchstart touchend touchmove touchcancel