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

0顶
0踩

行业应用

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

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

一、如何开始

从列表开发入手
移动端开发的基础是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 条 请登录后发表评论

发表评论

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

相关推荐

  • 大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品

    🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...

  • 网页制作基础知识

    网页的基本组成，以及相关基础知识

  • 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程序语言完成网站的功能设计。并确

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

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

  • web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)

    web网页设计期末课程大作业~粉色的服装购物商城页面模板 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页，登录页，瀑布流列表页，详情页带评价带晒单

  • 新手也能轻松上手！网页布局设计的10个黄金法则

    网页布局在整个网页设计中起着至关重要的作用。不同的网页布局设计会产生不同的视觉效果，直接影响浏览者对网页的第一印象。即时设计认为，网页布局在很大程度上决定了网站用户如何与网页内容互动。好的网页设计具有很强的实用性和适应性，所以在布局上要选择合适的设计，让用户满意。作为UI设计师，我们应该遵循网页布局的最佳实践效果，为观众带来最前沿、最全新的网页体验。以下常见的网页布局是什么？跟随即时设计，了解10种常见的网页布局设计方法。即时设计 - 可实时协作的专业 UI 设计工具。

  • 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+CSS+JS)

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

  • 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>

  • 第1章 网页制作的基础知识

    Web前端是指构建和设计用户在浏览器中直接交互的部分的技术和过程。它涉及到网页的视觉效果、布局、用户体验和交互功能。HTML是构建网页的基础语言。它用于定义网页的结构和内容，使浏览器能够正确地显示文本、图像、链接和其他元素。HTML是构建网页的核心语言，定义了网页的结构和内容。通过使用各种标签和属性，开发者可以创建丰富的用户体验。随着HTML5的引入，网页开发变得更加灵活和强大。

  • 大学生网页设计作业——11张精美网页 html+css+javascript+bootstarp

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、个

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

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

  • 网站设计65条原则

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

  • 网站设计的原则

            网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。企业网站设计显得极为重要，下面是一些网站设计中应注意的原则。 一、 明确建立网站的目标和用户需求     

  • 网站页面设计的原则有哪些呢？

    网站页面设计包含着很多学术，是用户与网站进行交互的媒介，同时也是一种独特的艺术。所以，在进行网站页面设计的时候，需要遵循以下原则。 1、用户体验 在设计网站页面的时候，一定要以用户体验为核心，详细的了解用户群体的年龄、性格特征、思维方式以及习惯等等，这样才能让用户喜欢这个网站。 2、KISS KISS就是需要保证页面的简洁化以及傻瓜化，以便于用户的操作。页面应该尽量少用一些琐碎的图片，因为琐碎的图片要比一张大图片加载的时间长。在操作的设计上应该简单明了，所有内容和服务都要在显眼的地方予以说.

Global site tag (gtag.js) - Google Analytics