iKcamp出品|微信小程序|小试牛刀(视频)+发布流程|基于最新版1.0开发者工具初中级教程分享
iKcamp官网:http://www.ikcamp.com
访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码
第一章:小程序初级入门教程
小试牛刀【含视频】
视频地址:https://v.qq.com/x/page/i0554akzobq.html
这一章节中,我们尝试着写一个最简单的例子,包含 2 个静态页面,并增加菜单导航功能。小体验一把。
Step 1. 清理结构
清理后如下结构,只保留了两个 必备
文件,同时做如下修改:
├── app.js
├── app.json
//app.js
App({onLaunch: function () {}
})
{"pages":[],"window":{"navigationBarBackgroundColor": "#09ba07","navigationBarTextStyle": "#fff","navigationBarTitleText": "牛刀小试","backgroundColor": "#fbf9fe","backgroundTextStyle": "light"}
}
修改后,看下控制台有报错信息,因为我们把页面全都干掉了。
从报错信息来看,很明显,小程序默认会从 pages
字段中读取第一个地址,作为首页加载 – 知识点
。
Step 2. 增加 flex 页面
ok,现在开始添加我们的第一个页面,给它起个名字叫 flex
吧,防止大家 误以为名字叫 index
的才是默认打开的页面 :)
增加 flex
页面文件
├─ mypages/
│ ├─ flex/
│ ├─ flex.js // 空文件
│ ├─ flex.wxml // 空文件
│ ├─ flex.wxss // 空文件
├── app.js
├── app.json
在 app.json
中增加 flex
页面的配置地址
"pages":["mypages/flex/flex"
]
想要 flex
页面生效,需要在 flex.js
中调用全局函数:
// flex.js
Page({})
Page()
函数接受一个 object
参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
这时候再看下显示效果,已经没有报错信息了。
Step 3. 书写简单的 flex
布局页面
现在我们来实现一个简单的 flex
布局效果,就像微信官方平台展示的那个样子:
首先,在 flex.wxml
文件中增加布局标签:
<view class="section"><view class="section__title">flex-direction: row</view><view class="flex-wrp flex-row"><view class="flex-item bc_green">1</view><view class="flex-item bc_red">2</view><view class="flex-item bc_blue">3</view></view>
</view>
<view class="section"><view class="section__title">flex-direction: column</view><view class="flex-wrp flex-col"><view class="flex-item bc_green">1</view><view class="flex-item bc_red">2</view><view class="flex-item bc_blue">3</view></view>
</view>
然后在 flex.wxss
中,增加各 class
的样式:
.section__title{padding: 40rpx;
}
.flex-wrp{display: flex;flex-direction: row;
}
.flex-row{flex-direction: row;
}
.flex-col{flex-direction: column;
}
.flex-item{color: #fff;width: 200rpx;height: 200rpx;text-align: center;line-height: 200rpx;
}
.bc_green{background-color: #09ba07;
}
.bc_red{background-color: #f76160;
}
.bc_blue{background-color: #0faeff;
}
这里主要的东西就是关于 flex
的简单布局,想了解更多关于 flex
的同学,可以查阅下 flex 布局教程
一般情况下,不同的页面,都应该有一个独特的 title
,这就需要我们就给 flex
添加一个独立的配置文件 flex.json
:
{"navigationBarTitleText": "Flex-布局"
}
注意,与最外层的 app.json
不同的地方是,flex.json
是对全局配置 app.json
的补充,且只能覆盖 app.json
的 window
字段配置信息
Step 4. 增加 list 页面
list
页面,多少会比 flex
要复杂些。
刚进入到页面时候,显示没有数据的提示信息。随着用户往下滑动,我们需要动态的增加数据,每下滑一次,增加 3 条数据吧,最多 30 条数据。
同样的,先增加需要的文件:
├─ mypages/
│ ├─ flex/
│ ├─ flex.js
│ ├─ flex.wxml
│ ├─ flex.wxss
│ ├─ flex.json
│ ├─ list/
│ ├─ list.js
│ ├─ list.wxml
│ ├─ list.wxss
├── app.js
├── app.json
同时,我们对小程序增加一个 底部导航菜单
,方便测试我们的页面切换。
修改 app.json
文件:
{"pages":["mypages/flex/flex","mypages/list/list"],"window": {"navigationBarBackgroundColor": "#09ba07","navigationBarTextStyle": "#fff","navigationBarTitleText": "牛刀小试","backgroundColor": "#fbf9fe","backgroundTextStyle": "light"},"tabBar": {"color": "#999","selectedColor": "#2EBF76","borderStyle": "white","backgroundColor": "#f6f8f9","position": "bottom","list": [{"pagePath": "mypages/flex/flex","text": "布局"}, {"pagePath": "mypages/list/list","text": "列表"}]}
}
我们先来实现 js
部分的逻辑,由于需要把数据显示在视图 wxml
中,我们需要增加 data
字段 :
Page({data: {arrList: []}
})
这里说明下,wxml
中的动态数据均来自对应 Page
的 data
。当 data
中的数据通过 this.setData
发生变化时候,视图会随之更新变化。
因为我们是在用户下滑时候更新数据,这里我们调用下 onReachBottom
函数(当到达页面底部时候触发):
Page({data: {arrList: []},//微信官方提供的事件处理函数,当页面上拉触底时候自动调用该函数onReachBottom(){console.log('到达页面底部运行此函数')}
})
然后我们开始增加数据的业务逻辑:
Page({data: {arrList: []},onReachBottom(){console.log('到达页面底部运行此函数')this.updateArrList();},updateArrList(){let arr = this.data.arrListarr.push( ...this.createData() )this.setData({arrList: arr})},createData(){let length = this.data.arrList.lengthif(length >= 30 ) return [];return Array.from({length: 3},(v, i)=>`数据${1+i+length}`)}
})
当页面到达底部,会调用 onReachBottom
函数,在 onReachBottom
的最后,我们 尾调用
自定义的函数 updateArrList
来更新数据。
createData
函数的作用只是单纯的返回包含 3 个元素的数组,最后拼接后的新数据,会通过 setData
更新数据 arrList
,当数据更新后,视图会自动更新。
接下来,我们修改视图文件 list.wxml
:
<view class="container"><block wx:for="{{arrList}}" wx:key=""><view class="item"><text>{{item}}</text></view></block><block wx:if="{{arrList.length==0}}"><view class="item"><text>下拉加载数据</text></view></block>
</view>
block
标签并不属于组件,不会在页面中渲染,仅作接收控制属性用
for
循环指令包裹的范围内,子元素默认是 item
,如果想重新定义它的名字,可以在 wx:for="{{arrList}}"
后面增加 wx:for-item="item"
,同样的,也可以指定数组下标 wx:for-index="index"
我们对页面样式做简单的优化,由于当页面高度不够时候,难以操作触发 onReachBottom
,故我们给当前的页面外层标签 page
加一个 150%
高度:
page{height: 150%;
}
.item{background-color:#f6f8f9;color:#9a9a9a;font-size:14px;padding: 10px 20px;margin-bottom:15px;
}
同样的,我们也给 list
页面加一个 title
,增加 list.json
文件:
{"navigationBarTitleText": "展示数据"
}
大功告成!!!预览下小 demo 效果
如果之前有 appID
,也可以在手机端预览
小程序:审核发布流程
官方文档比较详细了点击查看
上一篇-iKcamp出品|微信小程序|工具安装+目录说明|基于最新版1.0开发者工具初中级教程分享
下期更新内容:小程序初级入门教程-
第二章:小程序中级实战教程:预备篇
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
相关文章:
听说 2017 你想写前端?
前端开发者指南(2017)
翻译连载 |《你不知道的JS》姊妹篇 | JavaScript 轻量级函数式编程
翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
iKcamp出品|微信小程序|小试牛刀(视频)+发布流程|基于最新版1.0开发者工具初中级教程分享相关推荐
- 微信小程序基于最新版1.0开发者工具分享-小试牛刀(视频) 发布流程
第一章:小程序初级入门教程 小试牛刀[含视频] 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝试着写一个最简单的例子,包含 2 个静态页 ...
- iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享...
?? 微信小程序课程,面向所有具备前端基础知识的同学 ?? iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程 ...
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 提取util公用方法 |基于最新版1.0开发者工具
iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享>. ...
- uni-app 微信小程序开发到发布流程
安装好HBuilder+微信开发工具,准备发车 1:新建一个uni-app 项目 2:发行微信小程序 3:微信开发者平台的微信小程序appid 复制进来(点击发行) 4:小程序开发工具就可以点击发行版 ...
- 微信小程序申请+开发+发布流程
框架用的Taro,开发工具用的是VSCode+微信开发者工具,VSCode主要用来编码,微信开发者工具主要用来看和最后上传那么一下,其他没什么好说的.放张图,大家自行体会: 利用taro发布web程序 ...
- 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC ...
- 腾讯技术分享:微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
- 技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
1.概述 本文内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC互通的实现思路以及技术方案.希望能带给你启发. 分别介绍 ...
- 微信小程序下载视频到相册(带进度条)
微信小程序下载视频到相册,并带进度条 <button class="desc-note my-button u-font-32" @click="toUpload( ...
最新文章
- 阿里技术文档:Redis+Spring全家桶+Dubbo精选+高性能+高并发
- 通俗理解kaggle比赛大杀器xgboost + XGBOOST手算内容 转
- 让机器像人一样听音乐,Facebook开源Demucs项目
- Arduino初初教程3 ——交通灯
- day31 logging 日志模块
- 每日一皮:最真实的现代互联网商业模式
- 如何制作流畅有力的游戏动画+Skullgirls案例分析
- php 文档转html格式文件,php学习笔记之将word文档转化为HTML文件
- [洛谷3121]审查
- JavaScript深度迭代遍历未知对象
- xmu1214: 购物
- linux进程管理简析
- 广播的接收与U盘广播
- GIS应用技巧之世界各国矢量获取途径
- 转阿彪 PHP常见的安全问题
- 字符串要求字母、数字、特殊字符,至少有两项。正则表达式不好写,可以用这个方法实现。
- win10系统关闭哪些服务器,win10.1系统哪些服务可以关闭掉?
- Vulnhub-Earth
- 《Thinking In Java》作者:不要使用并发!
- 孙陶然:创业是和平年代最靓丽的生活方式
热门文章
- Kettle 使用资源库功能把ktr元数据统一存储到数据库中
- Java RMI反序列化/JEP290相关
- ArcMap中饼图显示数值的方法
- 【CUDA编程】学习笔记(二) GPU硬件架构
- Ajax+jquery从入门到精通2017视频教程-赖国荣-专题视频课程
- org.apache.commons.fileupload.DiskFileUpload使用上
- 网络流媒体--SDP会话描述协议(RFC-4566)
- 一个主题是王嘉尔的静态网页(html+css 附源代码)
- 证件照片如何换背景底色,3个免费制作证件照的方法,简单易学
- 实体词典 情感词典_基于词典的文本情感分析(附代码)