资讯频道 → 行业应用
阅读更多

0顶
0踩

行业应用

转载新闻 一小时入门微信小程序

2017-01-09 16:38 by 副主编 jihong10102006 评论(0) 有6672人浏览
微信小程序
微信推出小程序后,有人看好,有人吃瓜观望.奔着对新事物保持好奇心的原则,尝尝鲜.

一、如何开始

从列表开发入手
移动端开发的基础是UI开发,而UI开发中最基本的技能便是对列表(UITableView,UICollectionView,ListView,GridView)的使用.因此能够熟练使用列表,基本上已算是入门.

需要技能
在安卓,iOS,WP,H5任何一个平台开发过列表页面

二、准备工作
1.注册小程序号
2.下载开发工具
3.下载Demo源码
4.简易教程

三、微信小程序开发

目标:入门小程序
途径:编程实现一个列表页和跳转到响应的详情页

基础知识

1.项目目录
小程序包含一个描述整体程序的 app(由三个文件组成小程序逻辑--app.js,小程序公共设置--app.json,小程序公共样式表--app.wxss,必须放在项目的根目录) 和多个描述各自页面的 page。

图1

2.页面组成
一个小程序页面由四个文件组成,分别为:页面逻辑--index.js(必须),页面结构--index.wxml(必须),页面样式表--index.wxss(非必须),页面配置--index.json(非必须)

图2

3.页面的生命周期(js文件中)
  • 1).onLoad: 页面加载
  • 2).onShow: 页面显示
  • 3).onReady: 页面初次渲染完成
  • 4).onHide: 页面隐藏
  • 5).onUnload: 页面卸载
实现模块
网络数据->列表页渲染->跳转到详情页

具体实现方式
在index.js中获取网络数据->将网络返回数据传递到wxml->wxml接收并使用数据
  • 逻辑层获取数据
    •      在index.js的onShow中调用wx.request()获取网络数据
  • 逻辑层发送数据
    •     通过调用this.setData()data 将会以 JSON 的形式由逻辑层传至渲染层.如图3,其中传递的数据格式为JSON {xxx:res.data}


图3

  • 渲染层接收数据
    •     如图4,获取数据方式:{{xxx}}


图4

  • 渲染层列表的实现
    •     如图4所示,homelist便是列表,scrollviewcell为列表中的每一个item(根据数据的不同,可以定义多个样式)
        wx:for(包括wx:for-item,wx:for-index),wx:if为wxml的循环和判断控制语句

  • 跳转详情页
    •     如图4在item中<navigator></navigator>可以实现跳转页面功能,其中url为将要跳转到页面的js文件路径,id,pic为携带的参数,下级页面的逻辑层可接收该信息.如图5.onLoad:function(options){}中的options存放的url参数(上个页面,<navigator></navigator>中url的参数)


图5

  • 详情页中传递点击事件
    •    如图5实现一个testTap:方法,在相应的渲染层绑定bindtap="testTap",如图6


图6


四、总结
需了解UI如何布局,数据如何传递,列表如何实现,页面上如何绑定点击事件.Demo源码
  • UI布局需要了解XML和CSS相关的基本知识
  • 数据传递 (1). 从网络到app的逻辑层,调用wx.request() (2). 从逻辑层到渲染层,调用this.setData()
  • 列表的实现
  • 类比iOS开发中的UITableView,或者安卓中的ListView
  • 绑定点击事件 bindtap="xxxxx"
后续工作可以有:封装网络层, 缓存, 制作通用wxml,wxss模板, 性能优化, 动效, 架构等.具体可参考:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
  • 大小: 81.8 KB
  • 大小: 112 KB
  • 大小: 137.3 KB
  • 大小: 139.6 KB
  • 大小: 104.1 KB
  • 大小: 70.8 KB
来自: BeanDu
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • web网站制作的实例（大学生期末作业）集合

    一、HTML期末学生结课大作业作品 200套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作 [建议收藏] 1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全) 2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) 3.HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计) 4.HTML期末大作业~海贼王中乔巴专题漫画学

  • 大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS

    临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确

  • 网页设计方案中的滚动条设计指南

    网页设计方案中的滚动条设计指南

  • HTML期末设计——代码篇

    事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;欢迎来到香氛密语&lt;/title&gt; &lt;style&gt;

  • WEB入门一 网页设计基础

    本章简介 在当今社会，网页是网络信息共享和发布的主要形式。而HTML (Hyper Text Mark-up Language)，即超文本标记语言，是创建网页基础。本章将学习HTML文档的基本结构、组成HTML文档的各类常见标签。HTML 标签可以说明文字、图形、动画、声音、表格和链接等。本章重点是各种标签的基本语法和用法。核心技能部分1.1HTML文档基本结构首先我们来

  • 计算机毕业设计——简单的网页设计

    1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑

  • 大学生网页设计作业——制作个人网站（如何搭建个人博客）

    📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

  • 三万字加源码，教你从零开始学网页设计（HTML5+CSS)

    &lt;!-- &gt; 大二的时候选修过网页设计这门课，但是时间长了好多东西都还给老师了，于是乎趁着在家的这段时间重新复习一下网页设计，也就是所谓的前端，也希望这篇文章能对一些小伙伴有所帮助。 文章目录第一章 HTML的基本标签1.1 主框架1.2 标题标签1.3 斜体标签与分割线1.4 分段标签1.5 加粗标签1.6 间隙符1.7 网页标题标签1.8 列表标签1.9 跳转标签（超链接）2.0 图片标签 第一章 HTML的基本标签 1.1 主框架 在本地新建一个txt文件，在文件中输入以下代码，然后另.

  • web网页设计

    很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。青春是一本太仓促的书<br></p>

  • 网页设计无从下手？分享9种常见网页布局教会你！优漫动游

    网页布局在很大程度上决定了网站的用户如何和网页内容进行交互，好的网页设计具有很强的实用性和适应性，在布局上我们要选择合适并且让用户满意的设计。

  • 用HTML+CSS做一个漂亮简单的个人网页

    用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............

  • 直接生成前端页面（html）——网址大全

    1.bootstrap 提供的一套前端自动在线代码生成器，对于不在乎前端页面的项目算是“神器”了 https://www.layoutit.com/build

  • 网页设计（一）

    网页设计 提示：这里有基础内容，也有中级内容 例如：网页设计div布局 网页设计网页设计前言一、什么是网页二、使用网页编辑软件（一）、初学者的网页制作软件（二）、中级网页制作软件（三）、高级网页制作软件这是我写的网页这是html代码这是css代码效果图如下温馨提示 前言 提示：这里可以添加本文要记录的大概内容：这是摘取网上讲解。 网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能

  • 200套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作 [建议收藏]

    一、更多HTML期末学生结课大作业作品 ❤200套HTML期末大作业网页设计作品 1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全) 2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) 3.HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计) 4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 5

  • 网站设计的思考

    网站设计的思考 1、定位你的网站主题和名称2、定位你的网站CI形象3、确定网站的栏目和版块4、确定网站的目录结构和链接结构5、确定网站的整体风格和创意设计6、首页的设计7、版面布局的原理8、网页色彩搭配的原理9、字体的设定10、网页中表格的运用 　　很荣幸，能在这里和大家一起探讨关于网站设计的问题。目前，网络上有关网页制作的各种教程已经相当多，可以方便地学习到最新的技术和技巧。可是，有关网页的设计

  • springboot毕设项目社区“希望之星”计划服务平台bzju1（java+VUE+Mybatis+Maven+Mysql）

    Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。springboot毕设项目社区“希望之星”计划服务平台bzju1（java+VUE+Mybatis+Maven+Mysql）若包含，则为maven项目，否则为非maven项目。Springboot + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。...

  • HTML网页的设计

    网页是我们上网经常会用到的、也是最常见的，而网页的布局是其中吸引人注意的一个点 。对于网页的排版布局我们会用到HTML自身的一些表格、图像构建；第二种就是CSS页面布局，它比HTML自身的布局结构要精细的多。 CSS指层叠样式表，储存在CSS文件中，它可以对HTML中的所有内容（标签、滚动条、字体、链接等）进行编辑。因为它是外部样式表，所以能极大的提升工作效率。我下面简单的介绍两种CSS中的样式，代码来自于菜鸟教程。CSS 简介 | 菜鸟教程https://www.runo...

  • 如何设计一个简单的网页

    设计一个简单的网页 1.按住文件新建文本（Ctrl+N），设计一个网页标题，点击创建 2.在&lt;body&gt;内部加入所需要的标签 如图中需要标题标签，水平线标签，段落标签 3.保存（Ctrl+S），按住F12即可运行 ...

  • DW个人网页设计制作 html网页设计制作源码

    HTML：结构 HTML期末大学生网页设计作业，可以替换文字图片满足不同的CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，代码简单学生水平, 适合初学者学习使用。(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般

  • 网站设计65条原则

    　　设计网站中有哪些关键技巧？有哪些陷阱？在这里，世界上一流的网站设计专家，让你共享他们的秘密，告诉你：使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。   　　01 明确内容   　　如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。     　　02 抓住用户   　

Global site tag (gtag.js) - Google Analytics