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

0顶
0踩

行业应用

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

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

一、如何开始

从列表开发入手
移动端开发的基础是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+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...

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

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

  • 网页制作基础知识

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

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

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

  • 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期末大作业~海贼王中乔巴专题漫画学

  • web期末作业网页设计——我的家乡（网页源码）

    1.网页作品简介方面：HTML网站模板。首页 家乡简介 风景名胜 特色美食 站长介绍 在线调查等总共 6 个页面html下载。2.网页作品编辑：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件等任意HTML软件编辑修改网页）。3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、表单、二级三级页面等，视频、 音频元素 、Flash，基本期末作业所需的知识点全覆盖。文章目录一、设计说明。...

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

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

  • 新手指南：网页设计与制作的完整教程

    为网站选择主题。WordPress 主题犹如网站的外衣，决定着网站的整体外观风格。网络上有成千上万的免费和付费主题可供选择，你可以前往官方主题目录，特别是热门主题部分，挑选高质量且拥有庞大用户基础的主题。本指南推荐使用 “Neve” 主题，它带有多种入门网站设计包，适用于不同类型的网站。安装主题。进入 WordPress 管理界面（在 “”），使用安装过程中获取的用户名和密码登录。

  • web期末作业网页设计——制作作业实例（网页源码 ——全网最全,建议收藏) HTML+CSS+JS (2）

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

  • 高效美观的Web页面模板设计实战

    本文还有配套的精品资源，点击获取 简介：Web页面模板是预先设计的布局框架，用于快速构建网站并提供一致的视觉体验。本模板系列利用div和CSS技术，为设计师和开发者提供了既实用又美观的网页模板，支持快速创建专业外观的网站。模板采用清晰的代码结构，提高页面加载速度，并通过响应式设计适应不同设备。包含预设的颜色方案、字体选择、按钮样式、图标集及动画效果，既适合初学者学习，也为经...

  • 大学生网页设计制作作业实例代码 (全网最全,建议收藏) 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:是制作网页的标准语言。结构包括"头部"和"主体"两部分，"头部"提供关于网页的信息，"主体"提供网页的具体内容。CSS:是一种用于描述HTML文档显示样式和布局的标记语言。JavaScript:网络的脚本语言,用于Web应用开发。

  • 如何创建一个网站？初学者的分步指南

    为网站选择主题。WordPress 主题犹如网站的外衣，决定着网站的整体外观风格。网络上有成千上万的免费和付费主题可供选择，你可以前往官方主题目录，特别是热门主题部分，挑选高质量且拥有庞大用户基础的主题。本指南推荐使用 “Neve” 主题，它带有多种入门网站设计包，适用于不同类型的网站。安装主题。进入 WordPress 管理界面（在 “”），使用安装过程中获取的用户名和密码登录。

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

  • 网站设计65条原则

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

  • 网站设计的原则

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

Global site tag (gtag.js) - Google Analytics