微信开发

环境准备

使用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 启用,然后就可以快乐格式化也没有红色波浪线

底部

这是一张本地图片