[前端-微信小程序]瞎聊微信小程序

微信小程序已经不算是一个新鲜的东西了，可是仍是蛮好玩儿的，由于最近找工做待业中闲着无聊，就抽出半天时间玩儿玩儿微信小程序，由于没有深刻的研究，若是有错误欢迎你们指正。

微信小程序的优点

1. 用户获取简单，不须要注册，有微信的，点个受权就能够了。

2. 兼容性你是不须要考虑的，微信已经帮你弄好了。

3. 排版布局，使用微信定义的rpx，应该能够解决一切。

微信小程序的劣势

1. 确定没有原生App流畅了

2. 就是至关于开了个浏览器tab页，对于数据推进好些，可是对于Dom操做多的可能不太适合。

以上仅仅是我我的的一点小见解，若有错误欢迎你们指出。

---

对于微信小程序，每一个页面对应4个文件(js,json,wxss,wxml)，根目录(app.js,app.json,app.wxss)一个都不能少的。

JS文件：API 文档

[1]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/
小程序的焦文代码，能够在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。
可参考

JSON文件配置详解

对整个小程序的全局配置。咱们能够在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

WXSS文件

整个小程序的公共样式表。咱们能够在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

WXML文件查看文档

<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>