首页 > 代码库 > “小程序”初探

“小程序”初探

新的技术出现,总是好的。

最近各大社区,小程序炒得如火如荼,内测的第一天在React群分出的一个微信应用号开发者群,被拉进去后看着人数刷刷的增加,一天就满了2000人.... 随之出来的就是各种破解工具,各种教程,于是带着被推动的好奇心,跃跃欲试..

为什么小程序突然那么火:

  1. 基于微信庞大的用户群体
  2. 服务号随着功能的越复杂日益累赘,以及有些功能实现效果不好,应用号是必然的产物
  3. 低频刚需的app,小程序刚好能替代
  4. 创业者的希望,可能是一个赚钱的机会
  5. webapp或hybrid app是大趋势

无可厚非,国内h5的发展很大的功劳是微信的服务号,随着服务号的推出,很多应用都会有一个微信版,但是只能局限于简单的交互,随着业务越复杂客户体验会越差,所以应用号应该说来得恰当好处。

小程序会取代app吗?

其实这本身就是一个伪命题,肯定说不上取代。但是如果推广得好的话会造成一定的影响,微信的使用频率会增加,不经常使用的app可能用微信小程序就可以了。再一个,创业者也可以借助这个平台引来不少流量,甚至都不需要开发自己的app了,极大节约成本。

小程序并不是原创

其实很早听说过的就是百度轻应用了,后面还有钉钉的企业定制,支付宝... 只是这些都没有做起来,或许是用完即走的方式,很难让用户形成习惯,可能用完就忘了。也或许是没有像微信的庞大用户群体。

对开发者

作为前端开发者,有喜有忧。我常说新的东西总是好的,拥抱变化,起码是背后许多人努力的成果,肯定是进步。h5会越来越火,前端的需求会增多,可能招聘又会多了一条要求:有小程序开发经验者优先.. 可能又会有那么一段时间需要去翻文档,填坑,习惯微信提供的接口语法,改变以操作数据的形式替换原来jQuery的固有套路,当然这也是趋势,react、vue都是这种MVVM思想。但是火得东西就容易杂,相信培训机构又看到了商机,什么三天成为xx开发者.. 我不希望近几年才衍生的前端岗位也变得像JAVA那样杂乱不堪,良莠不齐。

 

行问:

行问是我一直以来想自己做的一件事情:提供一个骑行者的提问解答的交流平台,让更多的人了解骑行,加入骑行。考虑过用webapp做,既然小程序正热,练练手熟悉下API,也算是个总结,后续可以温故知新。

1先看效果:

技术分享

 

2:目录结构

技术分享

.js结尾的为页面逻辑,wxml页面结构。json页面配置、wxss页面样式二者非必须。

3,app.json

技术分享

4,app.sxss

全局样式,针对每个页面有效。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

>样式导入:使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径

/** common.wxss **/.question-list {      padding:0.8rem;}
/** list.wxss **/@import "common.wxss";.question-list text {         color:#CCC}

 

5,index.wxml

在app.json配置里pages那个数组第一行的页面就是"小程序"打开显示的首页。

>数据绑定:我们必须挣脱jQuery操作dom的形式来构造页面的固有思路

<view  bindtap="bindViewTap" class="userinfo">    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>    <text class="userinfo-nickname">{{userInfo.nickName}}</text>  </view>

>index.js 页面运行会执行onload方法,将用户信息set到data对象中userInfo集合,页面即可通过userInfo.xx获取数据绑定到dom元素中

技术分享

>省略wxss,主页效果图:

技术分享

 

6. 提问列表页

>list.wxml,通过wx:for这个控制属性绑定一个数组,然后使用数组中各项的数据循环渲染该组件

<view class="flex-list" wx:for="{{productList}}" bindtap="wait">          <image src="{{item.imgSmall}}"/>          <view class="title">              <view class="product-name">{{item.title}}</view>              <view class="product-sub-title">{{item.detail}}</view>                  <view class="product-like-comment">                  <text class="like">赞{{item.like}}</text>                  <text class="comment">回答{{item.comment}}</text>              </view>          </view>      </view>

>list.js,在data对象里预制好productList数据,当然实际的开发中我们是通过wx.request()这个api请求后台获取数据。

data: {    baseUrl: ‘‘,    bannerUrl: ‘/images/question/banner_1.jpg‘,    toast2Hidden: true,    productList: [      {        imgSmall:‘/images/question/list_1.jpg‘,        title: ‘国庆骑行应该注意什么事项?‘,        detail: ‘好想为祖国庆生..‘,        like: ‘18‘,        comment: ‘22‘      },      {        imgSmall:‘/images/question/list_2.jpg‘,        title: ‘桂林最适合骑行的路线?‘,        detail: ‘阳朔山水甲桂林..‘,        like: ‘6‘,        comment: ‘23‘      }    ]  },

 

>初步效果图

技术分享

 

总结语:

微信给我们提供的这个平台固然好,让开发者仿佛看到了新大陆,即使前端的趋势是这个MVVM的设计模式,脸书的React,国产的Vue.js都是优秀的例子,但是并不适合初学者,不能盲目的追从。毕竟刚出来的东西有些接口也还不够成熟,API还不够全,其他的插件又用不了,实现一些复杂的功能可能会比较麻烦,并且微信的规则只适合微信里面用,最怕的是造成熟悉了这个套路丢了原来熟悉的jquery,最终邯郸学步什么都忘了,把握好度。

 

参考链接:

quickstart https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1475052048561

组件语法 https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=1475052048561

开发者工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364

“小程序”初探