微信小程序入门级教程-02
2018-03-10 本文已影响17890人
liuuuuuu
前言
前几天刚开始看了1个多小时的微信小程序API，就写了个烈火如歌的demo，因为Gif录制选择像素低了，所以导出来的Gif图看起来非常不爽，今天研究了小半天的小程序API文档，打算重新推翻本节教程，重新按照今天所学的东西来讲解入门级的小程序看，效果图如下：
动态效果图
静态效果图
目录
https://www.jianshu.com/p/9c9b555b52e8
开始
- 新建一个空文件夹作为项目文件夹，本教程目录以
Movies为例；然后按照API文档所示创建app为名的必要文档，如：app.json，app.wxss，app.js，app.wxml；本处可以根据API文档添加必要的一些全局展示，但是本案例中暂时不做任何操作。 - 在app.js同级创建一个文件夹，命名随意，只要是不作的名字都可以；本案例以
talk为例，在talk文件夹下创建对应的文件，如：talk.js，talk.json，talk.wxss，talk.wxml。 - 开始写页面，本处不做详细讲解，关于不懂的标签，大家可以去
API文档查阅，否则一味的直接告诉答案，不是我出教程的初衷。
talk.wxml
<swiper indicator-dots="true" autoplay="true">
<swiper-item wx:for="{{banners}}">
<image src="{{item}}"></image>
</swiper-item>
</swiper>
<scroll-view>
<view class="article" wx:for="{{articles}}">
<view class="author-data">
<image class="avatar" src="{{item.avatar}}"></image>
<text class="nickname">{{item.name}}</text>
<i class="iconfont icon-v{{item.level}} level"></i>
</view>
<image class="thumbnail" src="{{item.thumbnail}}"></image>
<text class="introduce">{{item.content}}</text>
<view class="operate">
<i class="iconfont icon-liulan operate-icon"></i>
<text class="perate-count">{{item.views}}</text>
<i class="iconfont icon-msnui-love operate-icon" data-id="{{item.id}}"
style="color: {{item.canLike ? '#aaa' : 'pink'}};" bindtap="likeThis"></i>
<text class="perate-count">{{item.likes}}</text>
<text class="perate-count create-date">{{item.date}}</text>
</view>
</view>
</scroll-view>
- 以上的页面代码中，有几个要点，如：swiper是什么？scroll-view和view有什么区别？text标签就是个文字，如果文字我不加text又有什么影响？这些问题答案如下：
- 第一，
swiper是小程序中的轮播图控件，具体包含的属性请看API； - 第二，
scroll-view和view的区别在于scroll-view是可以无限下拉的容器，而view不是。 - 第三，加了
text的好处有亮点，一是可以修改文字样式，二是可以在手机上选择该文字，如果不是text标签，则无法选择文字。
5.具体的wxss代码就不粘贴出来了，文字末尾会发出项目的Github链接。这个样式其实和css基本没区别，就是rpx和px单位有点区别，至于我们需要UI基于什么尺寸来设计呢？答案当然是IPhone6，因为基于IPhone6设计可以减少我们对尺寸的换算，直接物理像素和逻辑像素=1:1，写页面十分方便。
- 对于页面中出现了
wx:for，{{xx ? xxx : xxxx}}这类的语法就需要大家自己了解API文档了，在这里不可能对于所有东西都很详细的说明，毕竟学习还是要靠自己理解，分析，踩坑，但是我相信，但凡用过模板引擎的和vue，angular这类MVVM框架的同学，都应该毫无压力的猜到这类写法的意思。对于不知道的同学，就应该自己去看API文档，这样子，一步一步走，你会收获更大，顺便锻炼一下看API文档的能力。
7: 具体的js文档如下：
talk.js
Page({
data: {
banners: [],
articles: []
},
onLoad: function (options) {
// 模拟获取后台数据
let [bannerList,articleList] = [[
"/images/banner/banner01.jpg",
"/images/banner/banner02.jpg",
"/images/banner/banner03.jpg",
"/images/banner/banner04.jpg",
"/images/banner/banner05.jpg"
],[{
id: 1,
level: 1,
avatar: "/images/avatar/avatar-04.jpg",
name: "游子女°",
thumbnail: "/images/thumbnail/thumbnail04.jpg",
content: "《寒战》是银都机构有限公司、万诱引力丁有限公司、安乐影片有限公司" +
"联合出品的动作电影，由梁乐民、陆剑青执导，郭富城、梁家辉、杨采妮领衔主演。该" +
"片讲述了在新时代背景下，一辆价值不菲的警察冲锋车被劫持，随之整个香港都陷入到" +
"安全危机，警匪之间展开高智商较量。",
views: 637,
likes: 436,
date: "2018/03/12 14:28:38",
canLike: true
},{
id: 2,
level: 2,
avatar: "/images/avatar/avatar-05.jpg",
name: "笑如歌",
thumbnail: "/images/thumbnail/thumbnail05.jpg",
content: "《神偷奶爸3》（Despicable Me 3）是由环球影业及照明娱乐公司联合制作，" +
"凯尔·巴尔达、皮艾尔·柯芬、埃里克·吉隆联合执导，史蒂夫·卡瑞尔、克里斯汀·韦格、崔·帕克" +
"等主要配音的3D动画电影。",
views: 862,
likes: 639,
date: "2018/03/12 14:28:38",
canLike: true
}]
];
this.setData({
banners: bannerList,
articles: articleList
});
},
onShareAppMessage: function(){
let that = this;
let shareObj = {
title: "影视大爆炸社区爆文",
path: '/pages/talk/talk',
success: function(res){
// 转发成功之后的回调
},
fail: function(){
// 转发失败之后的回调
if(res.errMsg == 'shareAppMessage:fail cancel'){
// 用户取消转发
}else if(res.errMsg == 'shareAppMessage:fail'){
// 转发失败，其中 为详细失败信息
}
},
complete: function(){
// 转发结束之后的回调（转发成不成功都会执行）
}
};
return shareObj;
},
likeThis: function(e){
let [that,index] = [
this,
-- e.target.dataset.id
];
let status = that.data.articles[index].canLike;
if(status){
let likeCount = that.data.articles[index].likes;
that.setData({
["articles["+index+"].likes"]: ++ likeCount,
["articles["+index+"].canLike"]: false
})
}else{
wx.showToast({
title: '您已经点过赞啦~',
icon: "none",
duration: 2000
})
}
}
});
- 对于上面的js文件，其中在onLoad函数中的变量，都是模拟后台数据，如果是实际获取后台数据，可以看看
API中的wx.request方法，和jQuery的$.ajax用法差不多，这里多说一句哦，一般的jquery和zepto等第三方js文件在小程序中很多基本都用不了，为什么呢？因为小程序的运行不是基于浏览器的，所以并没有window，document对象。 - 第二呢，
onShareAppMessage函数是对于分享的函数，这里声明了该函数，小程序中才会出现分享按钮，如果大家想对页面内的某个组件使用分享功能，可以看看button组件的属性，在那里你会找到以组件的方式分享内容。 -
likeThis是模拟的点赞功能，写的比较low，大家将就着看吧，然后关于页面底部的tarbar呢？实在app.json中配置的，如下所示：
app.json
"tabBar": {
"color": "#fff", // 文字颜色
"selectedColor": "#87ceeb", // 选中时的文字颜色
"borderStyle": "black", // 上边线的颜色风格
"backgroundColor": "#2c2e3b", // 背景色
"list": [{
"pagePath": "pages/talk/talk",
"text": "素材",
"iconPath": "/images/button/box.png",
"selectedIconPath": "/images/button/box-active.png"
},{
"pagePath": "pages/talk/talk",
"text": "分类",
"iconPath": "/images/button/type.png",
"selectedIconPath": "/images/button/type-active.png"
},{
"pagePath": "pages/talk/talk",
"text": "工具",
"iconPath": "/images/button/tool.png",
"selectedIconPath": "/images/button/tool-active.png"
},{
"pagePath": "pages/talk/talk",
"text": "用户",
"iconPath": "/images/button/user.png",
"selectedIconPath": "/images/button/user-active.png"
}]
}
后言
好了，在这里，这篇教程大致的说明了怎么制作这么一个简单的小程序，关于具体的代码，大家可以在Github中看完整代码，也可以自己先摸索，如果不会再看代码。希望在自学的路上，有志同道合之人！在这里，这篇教程就到此为止。
项目源码：demigod-liu / douban-movies
说明
原创作品，禁止转载和伪原创，违者必究！
