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

微信小程序已經不算是一個新鮮的東西了，可是仍是蠻好玩兒的，由於最近找工做待業中閒着無聊，就抽出半天時間玩兒玩兒微信小程序，由於沒有深刻的研究，若是有錯誤歡迎你們指正。

微信小程序的優點

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>