微信小程序開發初體驗

微信小程序上線幾天了，趁着週末補了一下JS，而後今天參照文檔和教程寫了個小demo

文檔地址       教程地址

 

看文檔就看了一點時間，由於之前沒接觸過JS框架，可是接觸過PHP框架= = ，因此理解小程序的框架也不是很難。

微信小程序雖然是用了JS，可是沒有了document對象，用起來就感受有點彆扭，沒JS那種DOM操做爲所欲爲的感受。。多是由於暫時還不是很熟悉。

照着教程實現了一下，JS部分卻是沒什麼太大的問題。

主要是CSS部分，由於教程裏面的CSS作的感受不是很好，因此就本身重寫了。

注意事項：

重點：

• 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中

• 在 Android 上，小程序的 javascript 代碼是經過 X5 內核來解析

• 在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中

這就是爲何小程序同一段代碼，在各類機器上運行效果不一樣甚至會報錯的緣由。

1.用的單位是rpx，這個文檔裏面有介紹，能夠本身去查看。位置：框架->WXSS

2.屏幕的寬度是固定750rpx，= = 搞的我還傻乎乎的在想怎麼獲取屏幕的寬度再而後就行換算。。（不過這個rpx用起來仍是很爽的，起碼再也不須要進行各類分辨率調整了）

3.用到了display: flex;

flex-direction: column;

這兩個都是以前沒有接觸過的（原諒我渣渣）如今有必要好好了解下這個東西。

彈性佈局

4.JS沒有了DOM操做感受很不爽的樣子。獲取用戶的輸入都有點麻煩（詳情見文檔中的Q&A）

5.若是須要在組件中綁定數據進行傳輸，可使用將屬性命名爲data-XXX的方式，經過獲取event.currentTarget便可獲取XXX的值，若是須要跨頁面傳輸，能夠將此數據傳輸到AppService做爲全局變量，而後另外一個頁面從全局變量中獲取

若是是兩個頁面之間進行傳輸，能夠經過把XXX拼成URL傳遞過去，接收方能夠這樣接受：

 Page({
  onLoad: function(options) {
    console.log(options)
    this.setData({
      title: options.title,
      id:options.id
    })
  }
})

6.鏈接數據庫的話就經過wx.request請求數據就行了。

7.添加頁面必須在app.json中聲明頁面

8.有一個很神奇的地方，在你的app.json中，若是你聲明瞭多個頁面，而你其中有一個頁面沒有寫page，那麼後面的頁面中的page就會補上來，不要問我是怎麼知道的。。心痛。

好比，個人introduce中的js文件沒有生成page對象，那麼個人cases頁面中的page就會跑到introduce裏面去。。videos就會跑到cases裏面去，而後video頁面就會爆警告，Page[pages/videos/videos] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.  那麼其中的事件，數據什麼的也天然而然的都沒有了。。。

9.未完待續...

 有疑問的地方：

一、在swiper組件中，文檔中寫明瞭

swiper-item

僅可放置在<swiper/>組件中，寬高自動設置爲100%。

可是爲何我已經設置了swiper的組件寬度爲750rpx，swiper-item下的image組件依然在右側會有空白，即便把swiper-item的padding和margin設置爲0也不行，只能把image設置爲750rpx才解決。

二、彈性佈局，在小程序中貌似有點小bug，在和地圖組件配合使用時，使用flex-grow:1 讓地圖組件佔滿剩下的空間，在開發工具中沒有任何問題，可是在ios真機環境下，進入頁面會擠佔其餘組件的空間。而後又縮回去（也可能不會縮回去）

 新版本解決了這個bug

三、地圖組件在真機上沒法顯示本身的位置，可是在開發者工具上能夠顯示出模擬的位置。 

 新版本解決了這個bug

因爲小程序暫時不能跳轉外鏈，因此沒法進行詳情查看。只能實現到這裏了。

上代碼：

 1 <swiper indicator-dots="true" autoplay="true" interval="1500" duration="1000" class="slide-image-box">
 2     <block wx:for="{{news}}">
 3         <swiper-item>
 4             <image src="{{item.thumbnail_pic_s02}}" class="slide-image"/>
 5         </swiper-item>    
 6     </block>
 7 </swiper>
 8 <view class="news-list">
 9 <block wx:for="{{news}}">
10         <image src="{{item.thumbnail_pic_s}}" class="news-image"/>
11         <view class="news-content" data-news-index="{{index}}" bindtap="viewInfo">
12             <text class="news-title">{{index+1}}.{{item.title}}</text>
13             <text class="news-text news-author">{{item.author_name}}</text>
14             <text class="news-text news-date">{{item.date}}</text>
15         </view>
16 </block>
17 </view>

視圖層代碼

 1 Page({
 2     data:{
 3         news:[]
 4     },
 5     onLoad:function(){
 6         var that=this;
 7         wx.request({
 8             url:'http://v.juhe.cn/toutiao/index',
 9             data:{
10                 type: 'topNews' ,
11                 key: '482e213ca7520ff1a8ccbb262c90320a'
12             },
13             header:{
14                 'Content-Type': 'application/json'
15             },
16             success:function(res){
17                 if(res.data.error_code == 0){
18                     that.setData({
19                         news:res.data.result.data
20                     })
21                 }else{
22                     console.log("獲取失敗");
23                 }
24             }
25         });
26     },
27     viewInfo:function(e){
28         console.log(e.currentTarget.dataset.newsIndex);
29     }
30 })

邏輯層代碼

 1 .slide-image-box{
 2      width:750rpx;
 3      height: 422rpx;
 4 }
 5 .slide-image{
 6      width:750rpx;
 7      height: 422rpx;
 8 }
 9 .news-list{
10     display: flex;
11     flex-direction: column;
12     padding:20px 10px;
13 }
14 .news-image{
15     display:flex;
16     width:150rpx;
17     height:100rpx;
18 }
19 .news-content{
20     position:relative;
21     top:-100rpx;
22     left:180rpx;
23     width:530rpx;
24     height:120rpx;
25     margin-bottom:-60rpx;
26 }
27 .news-title{
28      font-weight:600;
29      font-size:30rpx;
30 }
31 .news-text{
32     font-size:24rpx;
33     position:absolute;
34     bottom:0rpx;
35     color:#aaa;
36 }
37 .news-author{
38     left:0rpx;
39 }
40 .news-date{
41     right:0rpx;
42 }

樣式代碼

同一套代碼

iphone6下效果：

 

iphone5：

iphone4：

 

三星S5：