新技术论坛
搜索
查看: 597|回复: 1

新人斩:微信小程序开发之初体验

[复制链接]
  • TA的每日心情
    开心
    2016-12-9 18:18
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]常住居民II

    扫一扫,手机访问本帖
    发表于 2016-11-24 06:46:00 | 显示全部楼层 |阅读模式
      上周被 小程序 刷了屏,吓得我周末赶紧撸了个 小程序 版的 知乎日报 压压惊, 总结一下这个开发体验,和踩过的坑。
      开发环境准备
      小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了,
    wKiom1gikXygELgiAABnkIMQmwU547.png-wh_651x-s_3983753739.png

      创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了。
      目录结构
    wKioL1fqLhTyxqiAAADbBIEyTbg192.png

      app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息
      pages 存放页面文件
      utils 工具类代码
      images 图片资源文件
      小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构、样式、和逻辑,相当于网页中的 html css 和 js 的关系。
      开发第一个页面
      代码来自新建项目
    1. <!--index.wxml-->
    2. <view class="container">
    3.   <view  bindtap="bindViewTap" class="userinfo">
    4.     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    5.     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    6.   </view>
    7.   <view class="usermotto">
    8.     <text class="user-motto">{{motto}}</text>
    9.   </view>
    10. </view>  
    复制代码
    1. /**index.wxss**/
    2. .userinfo {
    3.   display: flex;
    4.   flex-direction: column;
    5.   align-items: center;
    6. }

    7. .userinfo-avatar {
    8.   width: 128rpx;
    9.   height: 128rpx;
    10.   margin: 20rpx;
    11.   border-radius: 50%;
    12. }

    13. .userinfo-nickname {
    14.   color: #aaa;
    15. }

    16. .usermotto {
    17.   margin-top: 200px;
    18. }  
    复制代码
    1. //index.js
    2. //获取应用实例
    3. var app = getApp()
    4. Page({
    5.   data: {
    6.     motto: 'Hello World',
    7.     userInfo: {}
    8.   },
    9.   //事件处理函数
    10.   bindViewTap: function() {
    11.     wx.navigateTo({
    12.       url: '../logs/logs'
    13.     })
    14.   },
    15.   onLoad: function () {
    16.     console.log('onLoad')
    17.     var that = this
    18.     //调用应用实例的方法获取全局数据
    19.     app.getUserInfo(function(userInfo){
    20.       //更新数据
    21.       that.setData({
    22.         userInfo:userInfo
    23.       })
    24.     })
    25.   }
    26. })  
    复制代码




      新建的项目中,index 下都会看到这些代码,接下来分别介绍 wxml wxss js
      wxml
      这个是页面结构的描述文件, 主要用于以下内容
      用标签形式指定组件使用 view/view
      使用 wx:for wx:if 等指令完成一些模板上的逻辑处理
      使用 bind* 绑定事件
      wxss
      样式文件,和 css 语法基本一致,不过支持的选择器语法有限 看这里, 可以使用 flexbox 完成布局。
      内部也可以使用 import 命令引入外部样式文件
    1. @import "common.wxss";

    2. .pd {
    3.     padding-left: 5px;
    4. }  
    复制代码

      js
      页面逻辑控制, 遵循 commonJs 规范
    1. // util.js
    2. function formatTime(date) {
    3.   // ....
    4. }

    5. function formatDate(date, split) {
    6.   // ...
    7. }
    8. module.exports = {
    9.   formatTime: formatTime,
    10.   formatDate: formatDate
    11. }  
    复制代码
    1. var utils = require('../../utils/util.js')
    复制代码

      这里的js 并不是在 浏览器环境下运行, 所以 window.* 这一类的代码都会报错, dom 操作也是不被允许的,官方目前好像是不能支持其他的 js  库运行,全封闭式,这个以后应该会逐渐完善。
      页面上使用 Page 方法来注册一个页面
    1. Page({
    2.   data:{
    3.     // text:"这是一个页面"
    4.   },
    5.   onLoad:function(options){
    6.     // 页面初始化 options为页面跳转所带来的参数
    7.   },
    8.   onReady:function(){
    9.     // 页面渲染完成
    10.   },
    11.   onShow:function(){
    12.     // 页面显示
    13.   },
    14.   onHide:function(){
    15.     // 页面隐藏
    16.   },
    17.   onUnload:function(){
    18.     // 页面关闭
    19.   }
    20. })  
    复制代码

      当我们需要改变 绑定的数据时,必须调用 setData 方法修改,才会触发页面更新,像这样:
    1. Page({
    2.     data: {
    3.         text: '这是一个页面'
    4.     },
    5.     onLoad: function() {
    6.         this.setData({
    7.             text: 'this is page'
    8.         })
    9.     }
    10. })  
    复制代码

      条件渲染和列表渲染
      以下内容来自微信官方文档。
      小程序使用 wx:if= 完成条件渲染,类似于 vue 的 v-if
    1. <view wx:if="{{condition}}"> True </view>
    复制代码

      也可以用 wx:elif 和 wx:else 来添加一个 else 块:
    1. <view wx:if="{{length > 5}}"> 1 </view>
    2. <view wx:elif="{{length > 2}}"> 2 </view>
    3. <view wx:else> 3 </view>  
    复制代码

      wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
      内置变量 index (数组遍历的下标), item (数组遍历的每一项)
    1. <view wx:for="{{items}}">
    2.   {{index}}: {{item.message}}
    3. </view>  
    4. Page({
    5.   items: [{
    6.     message: 'foo',
    7.   },{
    8.     message: 'bar'
    9.   }]
    10. })  
    复制代码

      使用wx:for-item可以指定数组当前元素的变量名
      使用wx:for-index可以指定数组当前下标的变量名:
    1. <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">

    2. {{idx}}: {{itemName.message}}

    3. </view>  
    复制代码

      
      事件绑定
      wxml 只是用 bind[eventName]=handler 语法绑定事件
    1. <view bindtap="bindViewTap" class="userinfo"><text>tap</text></view>  
    2. Page({
    3.     bindViewTap: function(e) {
    4.         console.log(e.taget)
    5.     }
    6. })  
    复制代码

      通过 data-* 和 e.target.dateset 传递参数
    1. <view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>  
    2. Page({
    3.     bindViewTap: function(e) {
    4.         // 会自动转成驼峰式命名
    5.         console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
    6.     }
    7. })  
    复制代码

      目前踩过的坑
      事件绑定中 e.target.dataset
      当在父组件绑定事件和参数,点击时又子组件冒泡事件到父组件,这个时候 e.target.dataset 为空
    1. <view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo">

    2. <view><text>tap</text></view>

    3. </view>  
    4. Page({
    5.     bindViewTap: function(e) {
    6.         console.log(e.taget.dataset.testMsg) // undefined
    7.     }
    8. })  
    复制代码

      在线图片加载不稳定
      在知乎日报这个项目上有大量图片需要从网上下载,这里 image 组件额显示显得极其不稳定,有很多的图片都显示不出来.
      最后
      微信小程序现在还在内测阶段,有很多的问题需要完善,不过对于开发速度和体验来说还是不错的,期待正式发布的那一天。

    资源




    匿名  发表于 2016-11-24 07:37:58
    我宁可开发易语言,也不开发微信小程序。
    高级模式
    B Color Image Link Quote Code Smilies

    本版积分规则

    手机版|Archiver|新技术论坛由 中国讯网 版权所有 ( ICP/ISP证:辽B-2-4-20110106号 IDC证:辽B-1-2-20070003号 )

    GMT+8, 2018-4-22 03:12 , Processed in 3.608408 second(s), 22 queries .

    X+ Open Developer Network (xodn.com)

    © 2009-2017 沈阳讯网网络科技有限公司

    快速回复 返回顶部 返回列表