微信小程序开发一

微信定义一套小程序标准，小程序的宿主是微信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