微信小程序的入门开发

1 首先进行导航键的设计 删除掉登录的一些不必要的东西,然后新建导航页面
在pages下面建立多个目录 toolbar 并且将图片也建立在一个目标文件夹下

{
  "pages": [
    "pages/index/index",
    "pages/fuwu/index",
    "pages/chanpin/index",
    "pages/zixun/index",
    "pages/guanyu/index",
    "pages/chanpin/mybtn",
    "pages/chanpin/myimg",
    "pages/chanpin/myshijian",
    "pages/guanyu/guanyu_info",
    "pages/guanyu/lianxiwom",
    "pages/chanpin/myfor",
    "pages/zixun/zixun_xinxi",
    "pages/fuwu/fuwu_xinxi"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eee",
    "navigationBarTitleText": "XY企业欢迎您",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home-off.png",
        "selectedIconPath": "images/home-on.png"
      },
      {
        "pagePath": "pages/fuwu/index",
        "text": "服务项目",
        "iconPath": "images/fuwu-off.png",
        "selectedIconPath": "images/fuwu-on.png"
      },
      {
        "pagePath": "pages/chanpin/index",
        "text": "产品案例",
        "iconPath": "images/chanpin-off.png",
        "selectedIconPath": "images/chanpin-on.png"
      },
      {
        "pagePath": "pages/zixun/index",
        "text": "资讯信息",
        "iconPath": "images/zixun-off.png",
        "selectedIconPath": "images/zixun-on.png"
      },
      {
        "pagePath": "pages/guanyu/index",
        "text": "关于我们",
        "iconPath": "images/kefu-off.png",
        "selectedIconPath": "images/kefu-on.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

2,首页的功能如下,主要有两个数组排列图片,可以用模板建立然后引入,运用轮转图片来实现轮转功能

轮转功能实现如下
模板建立

然后再index.html中引入此模板

最后在js中获取相关数据这样就可以展示轮转图片了

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    //向模板传入数据
    // 轮播
    index_index_scroll_tmpl: {     //name data相关
      images: [
        '/images/2.jpg',
        '/images/1.jpg',
        '/images/3.jpg',
      ],
      indicatorDots: true,
      vertical: false,
      autoplay: true,
      interval: 3000,
      duration: 1200      //相关轮播的属性
    },
    index_index_navs_tmpl: 
    {
        navs:[
          {
            image:'/images/i1.jpg',
            text:'上门开锁'
          },
          {
            image: '/images/i2.jpg',
            text: '配置钥匙'
          },
          {
            image: '/images/i3.jpg',
            text: '安装门禁'
          },
          {
            image: '/images/i4.jpg',
            text: '销售锁具'
          }                              
        ]
    },
    zixun:[]
  },fetchZixun:function(){
      var that=this;
      wx.request({
        url: "http://m.hzyaoyi.cn/wx/zixun_list_top3.asp",
        success: function (res) {
          console.log(res);
          that.setData({
            zixun: res.data
          })
        }
      })
  },
   /**
   * 生命周期函数--监听页面加载
   */
   onLoad: function (options) {
     this.fetchZixun();
  }
  
})