微信定义一套小程序标准,小程序的宿主是微信APP,客户端只有按照微信APP就可以自动下载并按照微信小程序,不再需要单独安装小程序,比传统的APP用户体验更好一些,微信小程序包括静态HTML页面,CSS,JS脚本,开发者按照业务逻辑设计小程序前端页面控制,和后台服务逻辑控制(部署在云服务上,提供HTTPS远程服务)。
开发环境准备:
1、下载微信小程序开发环境
官方地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2、准备后台云服务器,申请证书提供https服务
开始设计小程序
一、打开微信开发工具,创建微信小程序
点击使用测试号,开发过程可以临时使用测试号。
使用默认的小程序模板,创建的微信小程序包括如下默认的页面
二、删除模板创建的文件,根据业务要求重新创建
三、创建小程序首页
微信小程序页面分为四个文件,一次必须创建四个文件名相同,文件扩展名不同的文件,比如main.wxml,main.wxss,main.json,main.js,其中main.json文件中必须提供一个JS对象,否认编译错误,可以使用空JS对象{}
在app.json文件中配置
四、开始准备首页轮播图
在微信小程序根目录下创建images文件夹,并复制四幅图片到images文件夹中。如果通过微信开发工具无法复制图片,可以使用Window资源浏览器打开小程序所在目录,将图片复制到images目录中。
编辑main.wxml文件,添加轮播图控件
<view>
<swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="100%"/>
</swiper-item>
</block>
</swiper>
</view>
其中{{}}包括的部分是数据,通过main.js中定义
indicator-dots=“true"代表是否显示轮播图指示点
autoplay=“true"代表是否自动播放
interval=”{{interval}}” 每张图片切换结果时间,单位毫秒
duration="{{duration}}"切换图片持续时间,单位毫秒
circular="true"代表是否循环播放
wx:for="{{imgUrls}}“代表轮播图片集合
wx:key=”{{index}}“代表图片序号,本例程中没有使用
src=”{{item}}"代表每次循环遍历的每一幅图片
数据模型定义在main.js文件中,其定义语法必须符合小程序的约定,必须定义在Page({})里面
const app = getApp()
Page({
data: {
imgUrls: [
'/images/about1.jpg',
'/images/about2.jpg',
'/images/about3.jpg',
'/images/about4.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 3000,
duration: 800,
},
onLoad(){
},
})
五、设置背景色和小程序名称
修改小程序根目录下app.json文件
六、添加Tab标签
修改app.json文件,添加四个标签页,每个标签页设计两个图标文件,分别代表选中和未选中,暂时每个标签页都指向pages/main/main页面
"tabBar": {
"color": "#b7b7b7",
"selectedColor": "#AB956D",
"borderStyle": "white",
"backgroundColor": "#f5f5f5",
"list": [
{
"pagePath": "pages/main/main",
"iconPath": "images/12.png",
"selectedIconPath": "images/11.png",
"text": "选购"
},
{
"pagePath": "pages/main/main",
"iconPath": "images/32.png",
"selectedIconPath": "images/31.png",
"text": "订货"
},
{
"pagePath": "pages/main/main",
"iconPath": "images/22.png",
"selectedIconPath": "images/21.png",
"text": "销售管理"
},
{
"pagePath": "pages/main/main",
"iconPath": "images/42.png",
"selectedIconPath": "images/41.png",
"text": "我的"
}
]
},
代码下载
链接:https://pan.baidu.com/s/13DWO4f0vQOiD4kLC2dcVRw
提取码:v3li