郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript教程 >

微信小程序开发知乎日报列表实例讲解

来源:liuyy.coding.me 作者: myron 日期:2016-10-12 人气:
作者通过微信小程序制作知乎日报实例,来讲解如何入门开发微信小程序,图文并茂,轻松入门小程序开发。

作者通过微信小程序制作知乎日报实例,来讲解如何入门开发微信小程序,图文并茂,轻松入门小程序开发。

微信小程序开发环境准备

下载 微信开发者工具 就可以使用了

微信开发者工具

创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了。

小程序目录结构

小程序目录结构

  • app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息
  • pages 存放页面文件
  • utils 工具类代码
  • images 图片资源文件

小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构、样式、和逻辑,相当于网页中的 html css 和 js 的关系。web前端开发

开发第一个小程序页面

1
2
3
4
5
6
7
8
9
10
<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

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

新建的项目中,index 下都会看到这些代码,接下来分别介绍 wxml wxss js

wxml

这个是页面结构的描述文件, 主要用于以下内容

  • 用标签形式指定组件使用 <view></view>
  • 使用 wx:for wx:if 等指令完成一些模板上的逻辑处理
  • 使用 bind* 绑定事件

wxss

样式文件,和 css 语法基本一致,不过支持的选择器语法有限 看这里, 可以使用 flexbox 完成布局。
内部也可以使用 import 命令引入外部样式文件

1
2
3
4
5
@import "common.wxss";

.pd {
    padding-left: 5px;
}

js

页面逻辑控制, 遵循 commonJs 规范

1
2
3
4
5
6
7
8
9
10
11
12
// util.js
function formatTime(date) {
  // ....
}

function formatDate(date, split) {
  // ...
}
module.exports = {
  formatTime: formatTime,
  formatDate: formatDate
}
1
var utils = require('../../utils/util.js')

这里的js 并不是在 浏览器环境下运行, 所以 window.* 这一类的代码都会报错, dom 操作也是不被允许的,官方目前好像是不能支持其他的 js 库运行,全封闭式,这个以后应该会逐渐完善。

页面上使用 Page 方法来注册一个页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

当我们需要改变 绑定的数据时,必须调用 setData 方法修改,才会触发页面更新,像这样:

1
2
3
4
5
6
7
8
9
10
Page({
    data: {
        text: '这是一个页面'
    },
    onLoad: function() {
        this.setData({
            text: 'this is page'
        })
    }
})

小程序条件渲染和列表渲染

以下内容来自微信官方文档。

小程序使用 wx:if="" 完成条件渲染,类似于 vue 的 v-if

1
<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

1
2
3
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
内置变量 index (数组遍历的下标), item (数组遍历的每一项)

1
2
3
<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>
1
2
3
4
5
6
7
Page({
  items: [{
    message: 'foo',
  },{
    message: 'bar'
  }]
})

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名:

1
2
3
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

小程序事件绑定

wxml 只是用 bind[eventName]="handler" 语法绑定事件

1
<view  bindtap="bindViewTap" class="userinfo"><text>tap</text></view>
1
2
3
4
5
Page({
    bindViewTap: function(e) {
        console.log(e.taget)
    }
})

通过 data-* 和 e.target.dateset 传递参数

1
<view  bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>
1
2
3
4
5
6
Page({
    bindViewTap: function(e) {
        // 会自动转成驼峰式命名
        console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
    }
})

目前踩过的坑

事件绑定中 e.target.dataset

当在父组件绑定事件和参数,点击时又子组件冒泡事件到父组件,这个时候 e.target.dataset 为空

1
2
3
<view  bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo">
    <view><text>tap</text></view>
</view>
1
2
3
4
5
Page({
    bindViewTap: function(e) {
        console.log(e.taget.dataset.testMsg) // undefined
    }
})

在线图片加载不稳定

在知乎日报这个项目上有大量图片需要从网上下载,这里 image 组件额显示显得极其不稳定,有很多的图片都显示不出来.
原文:http://liuyy.coding.me/2016/09/26/wechat/wechat_start/

本文链接:微信小程序开发知乎日报列表实例讲解http://www.51xuediannao.com/javascript/xiaochengxu_zhihu.html

微信小程序开发知乎日报列表实例讲解由懒人建站收集整理,您可以自由传播,请主动带上本文链接

懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

(责任编辑:懒人建站)

上一篇:rollup.js打包

下一篇:es6模块化用法

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)