美文网首页微信小程序计算机杂谈微信小程序开发
简年13: 来写点微信小程序吧:D) ---- 分析小程序视图

简年13: 来写点微信小程序吧:D) ---- 分析小程序视图

作者: 张照博 | 来源:发表于2017-02-01 00:39 被阅读450次

    开篇语

    开篇语已经在热身阶段说过了,所以就不重复了。有兴趣的读者移步
    来写点微信小程序吧:D) ~~~(热身阶段)
    以及前面借鉴小程序开发官方文档的简易教程写的总纲
    来写点微信小程序吧:D) ~~~狂奔阶段
    还有分析小程序的目录结构与配置的内容
    来写点微信小程序吧:D) ~ ~ ~ 分析小程序目录结构与配置
    另外分析小程序的逻辑层的内容:
    来写点微信小程序吧:D) ---- 分析小程序逻辑层内容

    上一张学长的图片镇楼,下面直接上开发过程笔记。

    张小龙学长

    正文

    一、 小程序逻辑层分为以下3个Part:

    1. WXML
    1. WXSS
    2. 基础组件
    视图层结构图

    二、 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。说的通俗一点,WXML有点类似与HTML 一样是超文本标记语言,相当于一个最后的收尾的设计师。告诉你,这个地方要有个图片,然后这个图片是由另外的地方引进的,然后告诉你这儿有个按钮,这个按钮连接着别的地方的开关,只要你一点,就会发生什么事!这么一说,我还觉得做小程序就像盖房子,有人负责给房子打通各种通道(脚本js)、有人负责给房子规定布局,比如这个地方是什么颜色之类的(配置文件json)、还有的就是接通各个地方的线路的人(wxml)!万事万物,都有其相似之处啊。

    WXML的作用

    WXML有以下功能:

    1.数据绑定

    规定这个地方要有个text数据,然后数据来源是js里面的motto变量,至于样式则是user-motto的

    规定这个地方要有个text数据,然后数据来源是js里面的motto变量,至于样式则是usermotto的

    在对应的脚本里面定义一个变量motto

    然后在脚本里面定义一个变量

    最后在wxss里面(网页设计师应该已经醒悟了,微信就是照搬了HTML+CSS+Javascript的样子)写个样式

    usermotto的样式设置
    2.列表渲染

    先定义个列表变量,另外不知道为何,我不能在原本的data里面定义一个array变量。所以定义了一个新的data 以及把motto转进去了。

    先定义个列表变量 然后给一块地方,链接 来不及排版了。明天还要去我二姑妈家,赶紧弄完睡觉 还可以使用一些简单的函数做一些比较有趣的东西 一个没有排版的九九乘法表
    3.条件渲染

    设定判断条件,if就是判断的意思,然后{{ XXXX }} XXXX是判定条件,至于view是在js里面定义的变量,然后==的意思不用我解释吧 !所以通篇下来,其实就是一个

      if true:
            print(XX) 
      else:
             print(nothing)
    
    设定判断条件,if就是判断的意思,然后{{ XXXX }} XXXX是判定条件,至于view是在js里面定义的变量,然后==的意思不用我解释吧

    在脚本里面定义你所需要的一些变量

    在脚本里面写上变量的定义。 效果图
    4.模板
    模板的意思大概就是 Paste_Image.png Paste_Image.png
    5.事件

    事件是视图层到逻辑层的通讯方式。
    事件可以将用户的行为反馈到逻辑层进行处理。
    事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
    事件对象可以携带额外信息,如 id, dataset, touches。

    在wxml中建立一个事件,也就是其他编程中的使用函数。原文中的是建立一个view,我觉得这种需要输入的地方还是采用一个button按钮比较好。

    在wxml中建立一个事件,也就是其他编程中的使用函数

    在Js脚本文件文件里面写入方法(函数)并且绑定其中某个数据(另外,之前是我傻逼。。。。忘了加“,”所以一直编码不正确):

    在Js脚本文件文件里面写入方法 具体效果图
    6.引用

    WXML 提供两种文件引用方式importinclude


    import
    import可以在该文件中使用目标文件定义的template,如:

    item.wxml 中定义了一个叫itemtemplate

    <!-- item.wxml -->
    <template name="item">
      <text>{{text}}</text>
    </template>
    
    

    在 index.wxml 中引用了 item.wxml,就可以使用item模板:

    <import src="item.wxml"/>
    <template is="item" data="{{text: 'forbar'}}"/>
    
    

    include
    include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置,如:

    <!-- index.wxml -->
    <include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
    <!-- header.wxml -->
    <view> header </view>
    <!-- footer.wxml -->
    <view> footer </view>
    

    结束语

    小程序算是假期的一个调剂吧,不然真的就是天天看小说,看视频的糜烂生活了。所以要是大家有兴趣的话,可以关注一下我的进度。当然,小程序不是我的全部,寒假清单里可没有小程序的容身之地。所以可能会有存在时断时续的状况,不过这都不是问题。后面我也会持续的跟进我对官方文档的解读进度,对Javascript理解不深,所以难免有的地方会存在一些错误,敬请谅解,不过基本上每一个原创点都是经过我自己的调试Debug,高手别来笑话我这些低端,毕竟目前我还是很菜的。OK,简书写完了。我仿佛已经听到了扇贝单词在召唤我。~~ ~ 搞完活动碎觉咯 另外,辛苦某只 ~ ???~ ~ 一直跟我聊天到我写完,碎觉去!!!


    另外安利几位大神的作品(直接给大神简书的链接):
    微信小程序—豆瓣电影APP
    微信小程序之知乎日报
    微信小程序——一个简单的音乐播放器
    微信小程序-从零开始制作一个跑步微信小程序

    个人宣言

    知识传递力量,技术无国界,文化改变生活!

    相关文章

      网友评论

        本文标题:简年13: 来写点微信小程序吧:D) ---- 分析小程序视图

        本文链接:https://www.haomeiwen.com/subject/efmkittx.html