微信小程序開發初體驗

微信小程序上線幾天了，趁着周末補了一下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.未完待續...

 有疑問的地方：

1、在swiper組件中，文檔中寫明了

swiper-item

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

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

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

 新版本解決了這個bug

3、地圖組件在真機上無法顯示自己的位置，但是在開發者工具上可以顯示出模擬的位置。 

 新版本解決了這個bug

由於小程序暫時不能跳轉外鏈，所以無法進行詳情查看。只能實現到這里了。

上代碼：

<swiper indicator-dots="true" autoplay="true" interval="1500" duration="1000" class="slide-image-box">
    <block wx:for="{{news}}">
        <swiper-item>
            <image src="{{item.thumbnail_pic_s02}}" class="slide-image"/>
        </swiper-item>    
    </block>
</swiper>
<view class="news-list">
<block wx:for="{{news}}">
        <image src="{{item.thumbnail_pic_s}}" class="news-image"/>
        <view class="news-content" data-news-index="{{index}}" bindtap="viewInfo">
            <text class="news-title">{{index+1}}.{{item.title}}</text>
            <text class="news-text news-author">{{item.author_name}}</text>
            <text class="news-text news-date">{{item.date}}</text>
        </view>
</block>
</view>

Page({
    data:{
        news:[]
    },
    onLoad:function(){
        var that=this;
        wx.request({
            url:'http://v.juhe.cn/toutiao/index',
            data:{
                type: 'topNews' ,
                key: '482e213ca7520ff1a8ccbb262c90320a'
            },
            header:{
                'Content-Type': 'application/json'
            },
            success:function(res){
                if(res.data.error_code == 0){
                    that.setData({
                        news:res.data.result.data
                    })
                }else{
                    console.log("獲取失敗");
                }
            }
        });
    },
    viewInfo:function(e){
        console.log(e.currentTarget.dataset.newsIndex);
    }
})

.slide-image-box{
     width:750rpx;
     height: 422rpx;
}
.slide-image{
     width:750rpx;
     height: 422rpx;
}
.news-list{
    display: flex;
    flex-direction: column;
    padding:20px 10px;
}
.news-image{
    display:flex;
    width:150rpx;
    height:100rpx;
}
.news-content{
    position:relative;
    top:-100rpx;
    left:180rpx;
    width:530rpx;
    height:120rpx;
    margin-bottom:-60rpx;
}
.news-title{
     font-weight:600;
     font-size:30rpx;
}
.news-text{
    font-size:24rpx;
    position:absolute;
    bottom:0rpx;
    color:#aaa;
}
.news-author{
    left:0rpx;
}
.news-date{
    right:0rpx;
}

同一套代碼

iphone6下效果：

 

iphone5：

iphone4：

 

三星S5：