微信小程序开发初体验

微信小程序上线几天了，趁着周末补了一下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：