微信小程序开发初体验

Posted 这名字就是霸气

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序开发初体验相关的知识,希望对你有一定的参考价值。

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

由于小程序暂时不能跳转外链,所以无法进行详情查看。只能实现到这里了。

上代码:

 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:

 

以上是关于微信小程序开发初体验的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序开发之代码提示插件(VSCode)

微信小程序开发--模板(template)使用,数据加载,点击交互

小程序·巧应用,微信小程序开发实战

微信小程序开发之--"template模板“的应用

mpvue体验微信小程序开发

小程序+巧应用-微信小程序开发实战pdf