微信小程序入门之今日热点

微信小程序入门之今日热点

  • 小程序介绍
    • 一、前期准备
    • 二、开发者工具介绍
    • 三、小程序页面涉及的方法和注意点
    • 四、更多内容,请参考设计文档。

小程序介绍

1.今日热点首页,新闻轮播图和详情页
微信小程序入门之今日热点_第1张图片微信小程序入门之今日热点_第2张图片
2.电影页面:轮播图、即将上映和top25
微信小程序入门之今日热点_第3张图片微信小程序入门之今日热点_第4张图片
3.电影详情页和 搜索。
微信小程序入门之今日热点_第5张图片微信小程序入门之今日热点_第6张图片

一、前期准备

首先需要在微信公众平台注册账号,得到AppId,如果有多人开发,需添加开发者。然后安装开发软件,新建项目或者导入。
微信小程序入门之今日热点_第7张图片
开发环境:微信开发者工具
微信公众平台:https://mp.weixin.qq.com/
微信开发工具下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

二、开发者工具介绍

微信小程序入门之今日热点_第8张图片

  1. images ,用于放图片。
  2. page,新建页面:
    .wxml:布局文件;
    .wxss:样式文件,用于修饰的布局文件,引用方法与css相同;
    .js:此处可编写方法,数据加载;
  3. template,模板,在多个页面有相同布局内容出现时,可用模板,减少冗余代码。
  4. app.js是整个项目的启动文件。
  5. app.json是项目的配置文件,比如设置菜单和页面标题。小程序的第一个页面,默认app.json的pages中的第一个页面。
  6. 常用的wxml标签:view,text,swiper,block等等,这些标签直接查官网文档即可。

三、小程序页面涉及的方法和注意点

  1. 菜单,在app.json中配置。
    微信小程序入门之今日热点_第9张图片
    2.模版的使用,在模板页面新建模板,然后在wxml页面调用。
    在这里插入图片描述微信小程序入门之今日热点_第10张图片
    3.新闻模块的轮播图。
    微信小程序入门之今日热点_第11张图片
    4.新闻模块中页面的跳转,在js页面编写方法,然后在其他页面绑定该方法。
    微信小程序入门之今日热点_第12张图片
    在这里插入图片描述
    5.电影模块中即将上映的上拉获取更多,但需要注意的当该页面留有空白时,上拉获取更多不可实现,但页面不留有空白,可以获取。
    微信小程序入门之今日热点_第13张图片
    微信小程序入门之今日热点_第14张图片
    在wxml页面
    6.第三方API的获取,在js页面把获取到的数据用数组存在在data中,然后在另一页面使用。
    微信小程序入门之今日热点_第15张图片
    在这里插入图片描述
    7.电影模块的搜素功能。
    微信小程序入门之今日热点_第16张图片
    微信小程序入门之今日热点_第17张图片

四、更多内容,请参考设计文档。

小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/

你可能感兴趣的:(微信小程序入门之今日热点)