准备工作
小程序官网地址:https://developers.weixin.qq.com/miniprogram/dev/,进行申请小程序账号。(eg.:1219870668@qq.com),申请完进行登录。
登录后在“开发设置”中查看AppID并记下,并配置request的合法请求域名。
开发管理中的开发版本-审核版本-线上版本。
访问体验版需要在“用户身份”中进行管理人员和配置权限。
整体结构
图片目录(images)、页面目录(pages)、公共脚本目录(utils)、全局配置文件(app.js、app.json)、模板目录(template)五个大的部分构成。
所有访问页面需要在app.json中的pages中进行配置注册,且配置完成会自动生成4个文件(JS、JSON、WXSS、WXML),页面逻辑,页面配置,页面样式,页面结构。
导航栏的菜单配置需要在app.json中的tabBar中进行配置注册。菜单配置至少2个,最多5个。
app.json 配置文件,里边不能写注释,会报错;app.json中pages中谁放第一个,谁就是默认的首页。
公共脚本需要将定义好的function在module.exports中进行暴露, 暴露模块接口。
全局变量需要在app.js的globalData中进行定义,通过var app = getApp() 调用。
请求服务端数据的地址必须是https(或socket的wss),不能是ip或者localhost访问,并且必须在小程序后台中配置才可使用,否则提示非法域名。
启动页
welcome.wxml 中 页面标签主要有<view>、<text>、<image>。
绑定事件用bindtap,单个文件的json文件会覆盖全局app.json中相同配置项。
4种跳转方式如下:
wx.navigateTo 跳转新页面,未关闭当前页面;
wx.switchTab 跳转到导航菜单页面,必须要在tabBar中配置;(其他3个是不能跳转到导航菜单的)
wx.redirectTo 关闭当前页面,跳转新页面;
<navigator> 页面标签跳转。跳转新页面,未关闭当前页面
新闻列表页
左右滑动banner图。<swiper>、<swiper-item> 、indicator-dots、autoplay、interval、duration。
循环列表数据。<block>、wx:for、wx:for-item(list别名)、wx:key(唯一性字段)。