微信开发

环境准备

使用webstorm开发

  1. 让webstorm识别微信文件,Editor-->File Types --> Cascading style sheet 中添加*.wxcss

  2. 安装插件Wxapp Support 和 Wechat

    使用uniapp框架开发,配置

1
2
3
4
5
6
7
01) 安装完毕uniapp框架后,使用 npm run dev:mp-weixin 启动项目
02) 用微信开发者工具(导入中配置)指向 dist\dev\mp-weixin 下面目录
03) 此时可以在微信开发工具中看效果

uniapp 部分报错缺少包,需求单独安装
yarn add -D @dcloudio/uni-cli-i18n @dcloudio/uni-i18n
npm add -D @dcloudio/uni-cli-i18n @dcloudio/uni-i18n

单位

使用rpx, 1px=2rpx

页面整体高

1
2
3
page{ /**页面最外层page高度**/
    height:100%;
}

修改数据

1
2
3
4
5
6
onLoad:function(options){
    this.data.msg // 当前页面定义的数据
    this.setData({
        msg:"我修改了数据"
    })
}

绑定事件

1
2
3
4
5
6
<view bindtap="handleTap"> </view>

-----------------
<view catchtap="handleTap"> 
	<text>不会冒泡</text>
</view>

路由跳转

1
2
3
wx.navigateto({
    url:'/page/fei/index'
})

生命周期

1
// onLoad 和 onReady  中可以写发送请求

条件渲染

1
2
3
4
5
6
wx:if='条件'
wx:elif='条件'

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

组件

在每个文件的 index.json 的 usingComponents 中引入组件,demo:

1
2
3
4
5
{
  "usingComponents": {
    "NavHeader": "/components/NavHeader/NavHeader"
  }
}

使用npm包

1
2
3
npm init
01)微信开发工具本地设置-->勾选使用npm模块(或者将JS编译成ES5)
02)最后在,工具-->构建npm

解决rpx红色

安装插件 wechat-miniprogram-plugin,安装完毕找到这个插件,选择Enable 启用,然后就可以快乐格式化也没有红色波浪线

可移动区域

1
#要点 pointer-events 这个属性使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<view class="fei-wrapper" style="pointer-events: none">
  <movable-area class="fei-movable-area">
    <movable-view class="fei-movable-view" direction="vertical" x="0" y="300rpx">
      <image bindtap="toFei_点击事件" style="pointer-events: auto" class="img" src="图片地址"/>
    </movable-view>
  </movable-area>
</view>

<style lang="scss">
  .fei-wrapper {
    position: fixed;
    bottom: 200rpx;
    right: 1rpx;
    //background-color: #ff6b81;
    background-color: transparent;
    .fei-movable-area {
      height: 500rpx;
      width: 100rpx;
      //background-color: #ccc;
      background-color: transparent;
      overflow: hidden;
      .fei-movable-view {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100rpx;
        width: 100rpx;
        //background: #1aad19;
        .img {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }

</style>

底部

这是一张本地图片