从0到1:初学者入门Demo欢迎页
来源:互联网 发布:fm2017瓦尔迪数据 编辑:程序博客网 时间:2024/05/16 08:22
此贴适合小白学习,做出第一个自己的小Demo,大神可以选择是否踩踏… 欢迎和我一样的小白一起学习交流.. (被坑死了的我,含泪写下的初体验Demo分享)
为了给新手建立一个从0到1的过程,尽量一点一点加入新内容.. 给初学者一点点接受的过程..大家加油!!!
有着使用最简单案例展示小程序框架最核心内容的野心,并努力达成中…
初学者通过该帖将学习到0、小程序从无到有的全过程
1、小程序的文件结构
2、小程序的基本组件 image、view、button、text
3、小程序的推荐弹性布局 flex
4、小程序框架的核心内容—数据绑定
5、小程序的基本事件 tap
6、小程序的核心内容—列表渲染
7、小程序的下拉刷新、上拉加载
8、小程序的模块化编程—封装自己的按钮
9、小程序的一些坑
10、建立一个小程序单页面开发的一般流程,建立从设计图到页面设计的大局观
11、其他更多内容….
展示效果
准备的内容,小白不要错过,了解基本文件结构的读者可以跳过,但是推荐看看,会有一些收获的。
准备
1、默认读者具有 html、css、js 的一般性基础知识。对于没有任何相关知识的读者,请参看下面内容,或者可以直接上手写代码,再回头补上基础,未尝不可。
(1)小程序的文件结构
小程序包含一个描述整体程序的 app 和 多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
[td]
[td]
(3)手动构建以下的文件结构,每次创建后即刻保存(Ctrl + S),观察编译结果,体会各个文件的必须性(嫌麻烦的话,可以略过)。最终目录如下:
(4)小程序的没有任何理由的两个坑
欢迎页创建好基本的文件结构之后,下面开始首页的内容,根据以下的设计图,完成欢迎页的设计。
推荐初学者按照以下步骤来创建,笔者尽最大可能让初学者体会一下 页面布局的整体观念,这也是笔者学习时的路径,期待能帮助更多的人。
先骨架(wxml),再穿衣服(wxss),最后搞个小动作(js)
(1)构建 welcome.wxml 页面骨架,填充内容
welcome.wxml 需要使用到 view、image、text、button 组件
该步骤完成后,得到下图:
(2)页面骨架穿上衣服 welcome.wxss ,定义样式、布局
(3)最上方和设计图颜色不一致
最上方区域是小程序预定义的导航栏,开发者只可以更改颜色和导航标题文字内容,需要在 全局配置文件 app.json 中设置 window的导航栏背景颜色属性 navigationBarBackgroundColor 和页面背景色一致 ,配置后的内容如下:
(4)搞一个小动作 welcome.js
如果你是一个前端开发者,请不要在小程序里 动不动就想要 getElement ,这是传统的 dom优先 的开发思维。在小程序里,我们以数据优先,没有中间环节,直接在 js 中设置 数据内容,这一过程得益于小程序的核心内容之一:数据绑定。
wxml 中的动态数据均来自对应 Page 的 data。这是官方文档中的一句话,意图告诉我们将 页面的数据直放到 data 中,然后 wxml 中使用的 {{}} 语法将数据 进行显示,注意:{{}} 可以尽享简单的路径计算、逻辑计算、三目运算、扩展运算符等,但不支持使用函数的直接调用,毕竟 wxml 是页面内容,不是逻辑!,看不懂这段话,没有太大关系,只要有点印象即可。本次demo中,只涉及最简单的语法。
将 image 的 src、 text 的“MINA搬运工”定义在 welcome.js 的 data 中,在 wxml 中 使用 {{}} 进行数据的动态绑定
最终得到欢迎页面的效果是:
说明
和实际展示效果有出入,是因为
我要休息一下,上面的内容写了我整整 3 个小时,我现在需要 喝点水,吃点饭… 稍后回来…
封装一个按钮
个人喜欢在前端开发中常去封装一些组件,以便后期更好的使用。
小程序框架中也给出 模板化 这个关键词,面对小程序1024kb的限制,模板化 作为实现代码复用性的一个关键技术,无疑将是重中之中,笔者希望借助 view、text 组件封装一个 按钮,使得大家对于 模板化 有个基本的认识。
上图可以看出,现阶段距离目标只差一个按钮。
为了更好的实时看到封装的组件的样式,组件的封装和一般的开发是一致的,直接在所需要的位置进行设计,完成之后,只是最后需要将内容抽取出来,按照一定的语法定义,以便复用。
下面直接在欢迎页追加的 一个使用 view 、text 封装一个按钮
(1)追加按钮定义后的 welcome.wxml、welcome.wxss 、welcome.js 内容
(2)下面开始将 封装的按钮 进行一个抽取,以达到代码复用
(3)按照下图在 welcome 文件下新建一个 btn 文件,并在其中 创建 同名的 wxml、wxss 文件。注意:btn 路径不需要配置在 app.json 的pages 中,因为该内容是一个模板组件,而不是一个需要被app管理路由的页面
(4)将 welcome.wxml、welcome.wxss 文件中 对于简易按钮实现的定义抽取到 btn.wxml 、btn.wxss ,如下:
(6)模板化实现的语法说明
<template name="myBtn">..</template> 的作用是将其中的内容打包,定义一个名字 myBtn,作为一个模板待用。
在需要使用该模板的 wxml 文件中(比如:welcome.wxml),使用 <import src="btn/btn.wxml" /> 将模板所在 wxml 文件导入通过<template is="myBtn" data="{{btnColor}}">..</template> 实现模板重用,其中 is 指定为定义模板时的 name 属性值,data 指定为模板灌入的数据。(实际开发中可能会忘记的点:模板拥有自己的作用域,只能使用data传入的数据。)
对于为模板定义的样式,使用 @import "btn/btn.wxss"; 将其在目标 wxml 对应的 wxss 文件中加以导入(比如:welcome.wxml 对应的样式文件 welcome.wxss)。
内容页为了篇幅的美观 和 内容的质量,以及考虑到内容页实现稍微有点复杂,将于近期写成文章贴出来,尽请期待 . . .
http://www.wxappclub.com/topic/741
说明该篇内容从Demo到最终成文,前后笔者使用了 10 小时左右,笔者也是新手上路,期待大家的评论交流 . . .
全文 7322 字,我的键盘呀… 寿命大减!!!
源码地址百度云见原文:http://bbs.jointforce.com/topic/25381
为了给新手建立一个从0到1的过程,尽量一点一点加入新内容.. 给初学者一点点接受的过程..大家加油!!!
有着使用最简单案例展示小程序框架最核心内容的野心,并努力达成中…
初学者通过该帖将学习到0、小程序从无到有的全过程
1、小程序的文件结构
2、小程序的基本组件 image、view、button、text
3、小程序的推荐弹性布局 flex
4、小程序框架的核心内容—数据绑定
5、小程序的基本事件 tap
6、小程序的核心内容—列表渲染
7、小程序的下拉刷新、上拉加载
8、小程序的模块化编程—封装自己的按钮
9、小程序的一些坑
10、建立一个小程序单页面开发的一般流程,建立从设计图到页面设计的大局观
11、其他更多内容….
展示效果
准备的内容,小白不要错过,了解基本文件结构的读者可以跳过,但是推荐看看,会有一些收获的。
准备
1、默认读者具有 html、css、js 的一般性基础知识。对于没有任何相关知识的读者,请参看下面内容,或者可以直接上手写代码,再回头补上基础,未尝不可。
- 茂茂 CSS基础知识学习系列
- 丁小柒 JavaScript新手学习系列
- 更多内容:社区教程贴
- wxml :类 html5
- wxss:css3(一丢丢的差异)
- js:javascript
- json:json
(1)小程序的文件结构
小程序包含一个描述整体程序的 app 和 多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
[td]
文件
必填
说明
app.js
是
小程序的逻辑
app.json
是
小程序的公共设置
app.wxss
否
小程序的公共样式表
一个小程序页面由四个文件组成,分别是:[td]
文件类型
必填
说明
js
是
小程序的逻辑
wxml
是
小程序的公共设置
wxss
否
小程序的公共样式表
json
否
小程序的公共样式表
(2)创建Demo,为了更好的理解小程序的文件结构,学习时,我们直接从一个空项目开始构建。开发时,请尽情使用快速创建。
提醒:为了方便开发者减少配置项,规定描述页面的四个文件必须具有相同的路径与文件名。编译时,将自动关联。
(3)手动构建以下的文件结构,每次创建后即刻保存(Ctrl + S),观察编译结果,体会各个文件的必须性(嫌麻烦的话,可以略过)。最终目录如下:
注意:welcome页面的 wxss、json 文件是非必须的,但是新版本的开发工具,如果你在 app.json 的 pages 中配置了 welcome 页面的话,wxss、json 文件即使不存在,开发工具也会自动创建 wxss、json 文件以保证 页面的4个文件同时存在。一个新技能:页面的4个文件,开发工具可以自动创建,你仅仅需要在 app.json 文件中为 pages 配置页面的路径,开发工具将自动页面的 4 个文件。 比如:为 pages 添加一个 "pages/index/index" ,观察文件结构面板的变化。
- {
- "pages": [
- "pages/welcome/welcome",
- "pages/index/index"
- ]
- }
(4)小程序的没有任何理由的两个坑
- app.json 文件中不可以加入任何的注释,否则将报编译错误,页面的 json文件亲测也不可以(开发工具的 bug,记忆中有时候可以哦);
- 为了不出现莫名其妙的问题,小程序app.json 、app.js ,页面的 js、json 文件最简单也要如下图设置,其他文件可以空白。比如:页面的 json 文件如果没有给出 {} 的话,页面 wxml 中的布局将不会显示; 小程序的 app.json 如果 设置pages或pages 中没有设置任何页面的话,就会编译错误,等等。(ps:这些坑,有的是好的,有的是真的坑,慢慢体会吧)
欢迎页创建好基本的文件结构之后,下面开始首页的内容,根据以下的设计图,完成欢迎页的设计。
推荐初学者按照以下步骤来创建,笔者尽最大可能让初学者体会一下 页面布局的整体观念,这也是笔者学习时的路径,期待能帮助更多的人。
先骨架(wxml),再穿衣服(wxss),最后搞个小动作(js)
(1)构建 welcome.wxml 页面骨架,填充内容
welcome.wxml 需要使用到 view、image、text、button 组件
- a、view 组件 等价于是 前端中 div,唯一作用是:容器、分割元素。<view class="container"></view>
- b、image 组件 的 src 指定图片的路径 <image src="/imgs/minat.jpg" />
- c、text 组件显示文本,可以直接使用文本,但是不推荐,两个原因:可读性差、若移动端需要文本可以长按选中的话,必须使用 text 组件,另外 text 组件中仅可嵌套 text 组件,其他组件会被编译器自动移除
- d、button 组件 的 bindtap 是按钮定义一个点击事件,type 是定义按钮的样式,使用默认样式即可
- <!-- welcome.wxml 文件内容 -->
- <view class="container">
- <image src="/imgs/minat.jpg" class="meimg"></image>
- <text class="motto">Hello, MINA搬运工</text>
- <button bindtap="toMina" type="default">开启小程序之旅</button>
- </view>
该步骤完成后,得到下图:
(2)页面骨架穿上衣服 welcome.wxss ,定义样式、布局
- /* welcome.wxss */
- .container{
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color:#c0c0c0;
- }
- .meimg {
- width: 200rpx;
- height: 200rpx;
- margin-top: 200rpx;
- border-radius: 50%;
- }
- .motto{
- margin-top: 150rpx;
- margin-bottom: 200rpx;
- font-family:'Times New Roman';
- font-size: 16px;
- }
- a、小程序官方推荐的布局方案是 flex,本例使用最简单的 flex 布局实现,建立最初的认识,更多内容
- display: flex; 固定写法,表示容器内元素使用 flex 弹性布局
- flex-direction: column; 决定元素的排列方向,column 指按照交叉轴方向排列
- align-items: center; 决定元素在交叉轴上的对齐方式,center 指 居中排列
- b、设置页面背景时,可能会遇到 背景无法撑满整个页面的情况,其实, page 才是整个页面的 最顶层容器,不信打开调试的Wxml面板
- page {
- min-height: 100%;
- background-color:#c0c0c0;
- }
(3)最上方和设计图颜色不一致
最上方区域是小程序预定义的导航栏,开发者只可以更改颜色和导航标题文字内容,需要在 全局配置文件 app.json 中设置 window的导航栏背景颜色属性 navigationBarBackgroundColor 和页面背景色一致 ,配置后的内容如下:
- {
- "pages": [
- "pages/welcome/welcome",
- "pages/index/index"
- ],
- "window": {
- "navigationBarBackgroundColor":"#c0c0c0"
- }
- }
(4)搞一个小动作 welcome.js
- Page{(
- toMina:function(){
- // 点击按钮,实现页面跳转到内容页
- wx.redirectTo({
- url: '../index/index',
- })
- }
- })
如果你是一个前端开发者,请不要在小程序里 动不动就想要 getElement ,这是传统的 dom优先 的开发思维。在小程序里,我们以数据优先,没有中间环节,直接在 js 中设置 数据内容,这一过程得益于小程序的核心内容之一:数据绑定。
wxml 中的动态数据均来自对应 Page 的 data。这是官方文档中的一句话,意图告诉我们将 页面的数据直放到 data 中,然后 wxml 中使用的 {{}} 语法将数据 进行显示,注意:{{}} 可以尽享简单的路径计算、逻辑计算、三目运算、扩展运算符等,但不支持使用函数的直接调用,毕竟 wxml 是页面内容,不是逻辑!,看不懂这段话,没有太大关系,只要有点印象即可。本次demo中,只涉及最简单的语法。
将 image 的 src、 text 的“MINA搬运工”定义在 welcome.js 的 data 中,在 wxml 中 使用 {{}} 进行数据的动态绑定
- // welcome.js
- Page({
- data:{
- name:"MINA搬运工",
- imgSrc:"/imgs/minat.jpg"
- },
- toMina:function(){
- wx.navigateTo({
- url: '../index/index',
- })
- }
- })
- <!-- welcome.wxml -->
- <view class="container">
- <image src="{{imgSrc}}" class="meimg"></image>
- <text class="motto">Hello, {{name}}</text>
- <button bindtap="toMina" type="default">开启小程序之旅</button>
- </view>
最终得到欢迎页面的效果是:
说明
和实际展示效果有出入,是因为
我要休息一下,上面的内容写了我整整 3 个小时,我现在需要 喝点水,吃点饭… 稍后回来…
封装一个按钮
个人喜欢在前端开发中常去封装一些组件,以便后期更好的使用。
小程序框架中也给出 模板化 这个关键词,面对小程序1024kb的限制,模板化 作为实现代码复用性的一个关键技术,无疑将是重中之中,笔者希望借助 view、text 组件封装一个 按钮,使得大家对于 模板化 有个基本的认识。
上图可以看出,现阶段距离目标只差一个按钮。
为了更好的实时看到封装的组件的样式,组件的封装和一般的开发是一致的,直接在所需要的位置进行设计,完成之后,只是最后需要将内容抽取出来,按照一定的语法定义,以便复用。
下面直接在欢迎页追加的 一个使用 view 、text 封装一个按钮
(1)追加按钮定义后的 welcome.wxml、welcome.wxss 、welcome.js 内容
- <!-- welcome.wxml -->
- <view class="container">
- <image src="{{imgSrc}}" class="meimg"></image>
- <text class="motto">Hello, {{name}}</text>
- <!--<button bindtap="toMina" type="default">开启小程序之旅</button>-->
- <!-- view、text封装的一个简易按钮 start-->
- <view class="btn {{btnColor}}" bindtap="toMina">
- <text class="btntext">开启小程序之旅</text>
- </view>
- <!-- view、text封装的一个简易按钮 end-->
- </view>
- /* welcome.wxss */
- page {
- min-height: 100%;
- background-color:#c0c0c0;
- }
- .container{
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .meimg {
- width: 200rpx;
- height: 200rpx;
- margin-top: 200rpx;
- border-radius: 50%;
- }
- .motto{
- margin-top: 150rpx;
- margin-bottom: 200rpx;
- font-family:'Times New Roman';
- font-size: 16px;
- }
- /* view、text封装的一个简易按钮样式 start */
- .btn{
- margin: 0 10rpx 100rpx;
- padding: 20rpx;
- border-radius: 10px;
- }
- .btncolor1{
- background-color: lightseagreen;
- }
- .btncolor2{
- background-color: paleturquoise;
- }
- .btntext{
- font-family: Courier;
- font-size: 16px;
- }
- /* view、text封装的一个简易按钮样式 end */
- // welcome.js
- Page({
- data:{
- name:"MINA搬运工",
- imgSrc:"/imgs/minat.jpg",
- // view、text封装的一个简易按钮的初始样式
- btnColor:"btncolor1"
- },
- // 简易按钮的点击事件
- toMina:function(){
- // 获取 thisthis
- var that = this;
- // 点击简易按钮时,更改简易按钮的样式
- this.setData({btnColor:"btncolor2"})
- // 并跳转到内容页
- wx.navigateTo({
- url: '../index/index',
- // 跳转成功之后的回调函数
- success:function(){
- // 更改简易按钮的样式
- // 操作前后按钮样式的更改实现一个点击按下和松开的效果对比
- that.setData({btnColor:"btncolor1"})
- }
- })
- }
- })
(2)下面开始将 封装的按钮 进行一个抽取,以达到代码复用
(3)按照下图在 welcome 文件下新建一个 btn 文件,并在其中 创建 同名的 wxml、wxss 文件。注意:btn 路径不需要配置在 app.json 的pages 中,因为该内容是一个模板组件,而不是一个需要被app管理路由的页面
(4)将 welcome.wxml、welcome.wxss 文件中 对于简易按钮实现的定义抽取到 btn.wxml 、btn.wxss ,如下:
- <!-- btn.wxml -->
- <template name="myBtn">
- <!-- view、text封装的一个简易按钮 start-->
- <view class="btn {{btnColor}}" bindtap="toMina">
- <text class="btntext">开启小程序之旅</text>
- </view>
- <!-- view、text封装的一个简易按钮 end-->
- </template>
- /* btn.wxss */
- /* view、text封装的一个简易按钮样式 start */
- .btn{
- margin: 0 10rpx 100rpx;
- padding: 20rpx;
- border-radius: 10px;
- }
- .btncolor1{
- background-color: lightseagreen;
- }
- .btncolor2{
- background-color: paleturquoise;
- }
- .btntext{
- font-family: Courier;
- font-size: 16px;
- }
- /* view、text封装的一个简易按钮样式 end */
(6)模板化实现的语法说明
<template name="myBtn">..</template> 的作用是将其中的内容打包,定义一个名字 myBtn,作为一个模板待用。
在需要使用该模板的 wxml 文件中(比如:welcome.wxml),使用 <import src="btn/btn.wxml" /> 将模板所在 wxml 文件导入通过<template is="myBtn" data="{{btnColor}}">..</template> 实现模板重用,其中 is 指定为定义模板时的 name 属性值,data 指定为模板灌入的数据。(实际开发中可能会忘记的点:模板拥有自己的作用域,只能使用data传入的数据。)
对于为模板定义的样式,使用 @import "btn/btn.wxss"; 将其在目标 wxml 对应的 wxss 文件中加以导入(比如:welcome.wxml 对应的样式文件 welcome.wxss)。
内容页为了篇幅的美观 和 内容的质量,以及考虑到内容页实现稍微有点复杂,将于近期写成文章贴出来,尽请期待 . . .
http://www.wxappclub.com/topic/741
说明该篇内容从Demo到最终成文,前后笔者使用了 10 小时左右,笔者也是新手上路,期待大家的评论交流 . . .
全文 7322 字,我的键盘呀… 寿命大减!!!
源码地址百度云见原文:http://bbs.jointforce.com/topic/25381
0 0
- 从0到1:初学者入门Demo欢迎页
- webpack3从入门到放肆(附demo)
- 从入门到精通:卷积神经网络初学者指南
- 从入门到精通:卷积神经网络初学者指南
- 从入门到精通:卷积神经网络初学者指南
- PHP视频从入门到精通---适合PHP初学者
- 从入门到精通:卷积神经网络初学者指南
- 从51初学者到电子工程师1
- 从初学者到电子工程师
- [Android-ARCore开发]ARCore从入门到放弃1-Demo上手
- GAN学习指南:从原理入门到制作生成Demo
- GAN学习指南:从原理入门到制作生成Demo
- GAN学习指南:从原理入门到制作生成Demo
- GAN学习指南:从原理入门到制作生成Demo
- 【SpringBoot】从0到1认识springboot----搭建简单Demo
- Docker入门,从0到1
- NDK--demo (给予入门的初学者)
- 从51初学者到电子工程师
- mybatis绑定错误
- 如何使用ajaxUpload方式实现异步上传
- 简单工厂模式(Simple Factory)
- 文章标题 HDU 1241 : Oil Deposits (BFS)
- HTML5 drag & drop 拖拽与拖放简介
- 从0到1:初学者入门Demo欢迎页
- Vim简明教程【CoolShell】
- Android 底层封装之基于Rxjava与Okhttp网络请求封装(1)
- spring data mongodb 按小时分组查询
- AJAX总结
- 一款灵活好用的日历控件Kalendae
- Java基本概念-常用sql语句
- 轮播组件Swiper实现移动端网站的内容触摸滑动使用方法
- 微信小程序入门二:框架逻辑层