微信小程序

1.命令行创建wepy项目

wepy init empty HelloWorld(创建空项目，里面就一个View 显示HelloWorld)
//wepy init standard Hello(会生成几个默认的wpy文件)

image.png

2.添加项目依赖

npm install

//wepy项目中使用Promise，在1.4.1以后的版本，需要用户手动加入
进入项目根目录，安装polyfill
npm install wepy-async-function --save
在app.wpy中引入polyfill，在app.wpy构造中启用
import 'wepy-async-function'; 
  constructor() {
    super()
    // 启用wepy-async-function 功能包含ES6的async await promise
    this.use('promisify')
  }

3.开启代码实时监控编译

wepy build --watch(wepy build -w)

4.ctrl+c 终止监听

image.png

5.报错（15:1 error More than 1 blank line not allowed no-multiple-empty-lines）

编译前关闭框架eslint（wepy.config.js中eslint false）

image.png

TypeError: wx.getMenuButtonBoundingClientRect is not a function

image.png

6.布局相关

  /* flex伸缩盒布局  默认flex-direction:row 横向排列*/
  display: flex;
  /* 水平居中*/
  justify-content: center;
  /* 垂直居中 */
  align-items: center;

.container {
    /* 组合使用开始，使用绝对定位 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 使用 transform 将 view 在屏幕上垂直水平居中 translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动*/
    transform: translate(-50%, -50%);
    /* 组合使用结束 */
    width: 100%;
        /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh; */
    padding: 0 80rpx;
}


//image宽高自适应(https://developers.weixin.qq.com/miniprogram/dev/component/image.html)
<image style='width:100%;' mode='widthFix' src='/upload/banner1.png' />

//两个不同字体的text底部对齐
<view class="product-head">
    <text class="price">￥{{ goodsDetailData.goods_price }}</text>
    <text class="old-price">￥9999</text>
</view>
.product-head{
  display:table-cell; /*按照单元格的样式显示元素*/
  vertical-align:bottom; /*底对齐*/
}

7.自定义导航栏

app.json
"navigationStyle": "custom"//隐藏系统自带的导航栏

app.js
App({
  onLaunch: function(options) {
      const that = this;
      // 获取系统信息
      const systemInfo = wx.getSystemInfoSync();
      // 胶囊按钮位置信息
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
      console.log(systemInfo)
      console.log(menuButtonInfo)
      // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
      that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
      that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
      that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
      that.globalData.menuHeight = menuButtonInfo.height;
  },

  globalData: {
      navBarHeight: 0, // 导航栏高度
      menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
      menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
      menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
  }
})

//自定义界面wxml
<view class="bar" style="height:{{navBarHeight}}px">
</view>
//界面wess  
.bar{
  width: 100vw;
  background: green;
  position: fixed;  //生成固定定位的元素，相对于浏览器窗口进行定位。防止上滑导航栏一起移动
  top: 0;
  z-index: 999;
}
//界面js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navBarHeight: app.globalData.navBarHeight,
    menuRight: app.globalData.menuRight,
    menuBotton: app.globalData.menuBotton,
    menuHeight: app.globalData.menuHeight,
    number:0, //数字
    lastName = "Gates"，//字符串
    cars = ["Porsche", "Volvo", "BMW"]，   // 数组
     x = {firstName:"Bill", lastName:"Gates"}   // 对象
  }
})

8.提取相同的布局为component(组件),可以在需要的地方引入

serachbar.wpy
<style lang="less">
  .search-bar {
    background-color: #ff2d4a;
    padding: 20rpx 16rpx;
  }

  .search-bar-in {
    height: 60rpx;
    background-color: #fff;
    border-radius: 5rpx;
    //flex伸缩盒布局
    display: flex;
    //水平居中
    justify-content: center;
    //垂直居中
    align-items: center;

    //设置文字属性
    color: #bbb;
    font-size: 24rpx;
  }
  .icon-search{
    width: 32rpx;
    height: 32rpx;
    margin-right: 15rpx;
  }
</style>

<template>
  <view class="search-bar">
    <view class="search-bar-in">
      <image class="icon-search" src="../images/icon_search@2x.png"/>
      <text>搜索</text>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy'
  export default class Searchbar extends wepy.component {}
</script>

me.wpy 界面引入使用
<style lang="less">
</style>
<template>
  <SearchBar></SearchBar>
</template>
<script>
  import wepy from 'wepy'
  // 注意此处引入不能是searchbar.wpy 否则会报错找不到组件
  import SearchBar from '../components/searchbar'
  export default class Me extends wepy.page {
    components = {
      SearchBar
    }
  }
</script>

9.wepy处理点击事件

<template>
//事件绑定 也可以用<view class="to-top" @tap ="toTop">
<view class="index-nav" bindtap = "clickNav">
</template>
<script>
export default class Home extends wepy.page {
  methods = {
      clickNav: function() {
        console.log(111)
      }
    }
}
</script>