微信小程序实际案例详解:页面搭建(附代码)

发布时间:2018-01-13 17:19:37编辑:丝画阁阅读(412)

百度经验:jingyan.baidu.com

本文通过一个实际例子,来讲解如何进行微信小程序的页面搭建。首先看一下本文要实现的页面效果

百度经验:jingyan.baidu.com

工具/原料

  • 微信开发者工具
  • 小程序开发工具即速应用
百度经验:jingyan.baidu.com

方法/步骤

  1. 1

    这个就是程序的基本架构。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。底部标签底部标签是一个tabBar。实现比较简单,只需要简单配置一下即可。 app.json


    {

      "pages":[

        "pages/function/function",

        "pages/pay/pay",

        "pages/account/account",

        "pages/index/index",

        "pages/logs/logs"

      ],

      "tabBar":{

        "color": "#464a56",

        "selectedColor": "#6595e9",

        "backgroundColor": "#FFFFFF",

        "borderStyle": "white",

        "list": [{

            "pagePath": "pages/function/function",

            "text": "功能",

            "iconPath": "images/tab_function_default.png",

            "selectedIconPath": "images/tab_function_sel.png"

        },{

            "pagePath": "pages/pay/pay",

            "text": "收款",

            "iconPath": "images/tab_consume_default.png",

            "selectedIconPath": "images/tab_consume_sel.png"

        },{

            "pagePath": "pages/account/account",

            "text": "账户",

            "iconPath": "images/tab_account_default.png",

            "selectedIconPath": "images/tab_account_sel.png"

        }]

      },

      "window":{

        "navigationBarBackgroundColor": "#6595e9",

        "navigationBarTextStyle":"white",

        "navigationBarTitleText": "V50",

        "backgroundColor": "#eeeeee",

        "backgroundTextStyle":"light"

      }

    }

  2. 2

    值得注意的地方,就是 pages 接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。文件名不需要写文件后缀,因为框架会自动去寻找路径.json, .js , .wxml, .wxss的四个文件进行整合。

  3. 3

    页面标题

    这个标题如何实现? 

  4. 4

    我们只需要把所有页面通用的配置放在 page.json,然后在各个page的 .json文件里面配置每个页面特有的属性即可。因为在上面的 app.json 中已经配置了通用页面的 window属性了,我们只需要在function.json中配置页面标题即可


    {

        "navigationBarTitleText": "功能"  

      }

  5. 5

    轮播图

    接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。



        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

        

          

            

          

        



    function.js

     

    //function.js

    Page({

      data: {

        indicatorDots: true,

        autoplay: true,

        interval: 5000,

        duration: 1000,

        imgUrls: [

           'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

           'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

           'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

         ], 

      },

    })

    END
百度经验:jingyan.baidu.com

方法2

  1. 1

    但很多人不知道的是,其实微信小程序是可以借助一款简单实用的制作工具「即速应用」生成的。整个过程无需编程无需代码,通过简单的拖拽组件即可生成微信小程序,非常方便。下面分享一下微信小程序开发教程入门篇,让新手们迅速掌握微信小程序开发的基本方法。

  2. 2

    登录即速应用官网,点击上方首页菜单的“立即制作”,即可开始进行制作。

  3. 3

    选择“空白模板”,进行自由创作。如果想节省时间,也可以选择主题模板进行快速制作。

  4. 4

    进入制作界面后,可以看到页面分组和页面属性。点击“组件库”,开始搭建页面。

  5. 5

    根据自己的需求选择组件以搭建页面,每个组件的文案和图片都是可以自己编辑的。

  6. 6

    即速应用有很多可供选用的组件。比如用于布局的双栏组件、面板组件、顶部导航组件和底部导航组件。

    还有一些可以实现更多复杂功能的高级组件,比如动态列表组件、动态容器组件、自定义表单组件、个人中心组件。

  7. 7

    把每个页面都编辑好,并做好页面之间的跳转,确保逻辑无误。全部做好之后,点击右上角的“保存”,然后点击“发布”。若是制作过程中想要找回之前的版本,只需要去历史记录中回复既可。

  8. 8

    跳转页面后,再次点击“发布”,即可生成。

  9. 9

    点击“小程序打包”,生成小程序的代码。打包下载之后,就可以直接上传到微信官方后台的开发者工具里,即可完美对接小程序。技术人员还可以根据自己的需求修改,在原有代码的基础上进行二次开发。

    END
百度经验:jingyan.baidu.com

注意事项

  • 使用即速应用开发工具是为了可视化拖拽,无需查看代码,但是制作完成后,必须把后台生成的代码导入到微信开发者工具中,才可以达到小程序制作成功效果。
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
举报作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。

关键字