问题：一般在移动端，由于dpr（设备像素比）不为1，在PC端显示1像素的边框，在移动端其实显示为2px。
解决这个问题，主要思想是：使用伪元素设置1px的边框，然后使用 transform:scale，对边框进行缩放（scaleY）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 上边框
:before
    content ""
    position absolute
    top 0
    left 0
    right 0
    height 1px
    border-top 1px solid e5e5e5
    color #e5e5e5
    -webkit-transform-origin 0 0
    transform-origin 0 0
    -webkit-transform scaleY(0.5)
    transform scaleY(0.5)
    z-index 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 下边框 注意 transform-origin
&:after
    content ""
    position absolute
    bottom 0
    left 0
    right 0
    height 1px
    border-bottom 10px solid #e5e5e5
    color #e5e5e5
    -webkit-transform-origin 0 100%
    transform-origin 0 100%
    -webkit-transform scaleY(0.5)
    transform scaleY(0.5)
    z-index 2

前提

首先你要有ssh公钥和秘钥

查看当前git项目的提交方式

1

git remote -v

如果是 http 协议提交则会显示

BFC (Block Formatting Context)

块级格式上下文

两个相邻的BFC之间的距离由margin决定。
在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”，重叠为最大的margin

body根元素会创造一个 bfc 环境，其下所有元素具有相同的上下文环境

块 是页面的基础

wepy 组件化开发 1

要点

• 组件可以将一组功能封装一个 component 里，并且可以在页面上以自定义标签的形式引入

  1 2 3 4 5 6 7 8

  <!-- 列表 --> <discover></discover> <!-- 底部加载更多提示 --> <bottomLoadMore :message='mes' :show.sync='showLoading'></bottomLoadMore> <!-- 组件暂无数据的提示 --> <placeholder></placeholder> <!-- 弹出广告 --> <bombscreen></bombscreen>

• 引入组件

  1 2 3 4

  import Bomnbscreen from '@/components/bomb_screen' import Placeholder from '@/components/placeholder' import BottomLoadMore from '@/components/bottom_load_more' import Discover from '@/components/discover'

• 在 components 声明页面地组件构成

  1 2 3 4 5 6 7

  components = { // 标签名: 组件名 bombscreen: Bomnbscreen, placeholder: Placeholder, bottomLoadMore: BottomLoadMore, discover: Discover }

• 组件标签可以携带参数

  1	<bottomLoadMore :message='mes' :show.sync='showLoading'></bottomLoadMore>

  message="load more ..." 传参
  :message='mes' 则是把参数防止在 data 中

  1 2 3 4

  data = { showLoading: false, mes: 'loading more' }

组件数据props动态更新
使用 .sync =>

• 在组件文件内 props 接收传递的数据

  1 2 3 4 5 6 7 8 9 10

  props = { show: { type: Boolean, default: true, }, message: { default: '正在加载中', type: String, } }

  组件内接收

  1 2 3 4

  <view class="loadMoreGIF" wx:if="{{show}}"> <image src="../images/loadding.gif"></image> <text>{{message}}</text> </view>

wepy 之用户信息获取与 async 同步

获取用户信息与登录操作

open-type 显示用户信息，
bindgetuserinfo 点击返回获取到的用户信息，
wxpy.login() 登录，
async 对于函数内部有异步操作变同步的声明，

1

<button type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">授权</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// async: 对于函数内部有异步操作变同步的声明
async onGotUserInfo(e) {
    console.log(e);
    if (e.detail.errMsg == 'getUserInfo:ok') {
      // api wx.login wxpy.login 通过用户信息登录微信服务器 拿到 用户code 标识符
      // 然而这是异步的   回调地狱写法 success: res => {}
      // await 异步的代码变成同步的写法，执行login完成再接下去执行
      // 异步函数前需要声明 使用 async

      let res = await wepy.login();     // 登录 api
      console.log(res);
      // 需要在 app.wpy construct 启用 promise
    }
}

mpvue初识之安装和使用

安装和初始化

安装 vue-cli

1

yarn global vue-cli | npm install -g vue-cli

初始化一个项目

微信小程序组件化开发框架 WePY 初体验

写在前面：组件化开发的组价(Component)，说的不是小程序中的 scroll-view 这种页面组件，而是指一些设计为通用性的，用来构建较大型应用程序的软件，如 UI 组件。核心意义在于复用。WePY 就是基于 Vue、react 在 MVVM 基础上建立起来的组件开发框架。

WePY项目的创建

全局安装或更新WePY命令行工具

1

npm install wepy-cli -g

微信小程序初探

准备

1. 下载并安装 微信web开发者工具
2. 申请一个小程序账号, 点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料, 就可以拥有自己的小程序帐号
3. 登录微信公众平台, 在菜单 “设置”-“开发设置” 看到小程序的 AppID

   注意:小程序的 AppID 相当于小程序平台的一个身份证, 后续你会在很多地方要用到 AppID

你也可以参考小程序官方简易教程

第一个小程序

小程序解析html标签wxPrase插件

前言

通常我们在开发小程序（从列表页跳转到详情页）通过富文本编辑器返回的数据一般都是html的标签，但是偏偏微信小程序本身是不支持HTML标签的，所以我们在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。那么有没有这样一个东西能够将 html 解析为 小程序能够识别的标签呢，wxPrase插件就是这样一款插件

使用方法

1. 导入下载好的wxPrase文件在项目中（直接复制便是）；

2. 在相应的详情XXX.wxml 文件中引入wxParse.wxml (引入文件最好放在第一行)；

   例如：<import src="../../wxParse/wxParse.wxml"/>

3. 在相应的详情XXX.wxss文件中引入wxParse.wxss (引入文件最好放在第一行)；