前端实战系列：如何开发微信小程序

【课程简介】

小程序开发相对于App开发，开发快捷推广成本低，依托微信平台非常好推广，市面上很多企业现在都想开发自己的小程序。本次课程带大家开发一个小程序，从账号注册到编写全流程讲解，实现一个《本地生活案例》

【课程推荐】前端实战：如何开发微信小程序

【主讲内容】

1.申请、登录、初始化、介绍

2.预览测试、成员管理

3.app.json / window配置

4.app.json / tabBar配置

5.Index页面 / 轮播图

6.List页面 / 数据、事件绑定、API

7.Other页面/ 获取数据

申请、登录、初始化、介绍

 

 

 

 

 预览测试、成员管理

 

 app.json / window配置

 app.json / tabBar配置

"tabBar": {

    "list": [

      {

        "text": "首页",

        "pagePath": "pages/index/index",

        "iconPath": "./icons/home-default.png",

        "selectedIconPath": "./icons/home-active.png"

      },

      {

        "text": "卡券",

        "pagePath": "pages/cards/cards",

        "iconPath": "./icons/ticket-default.png",

        "selectedIconPath": "./icons/ticket-active.png"

      },

      {

        "text": "我的",

        "pagePath": "pages/my/my",

        "iconPath": "./icons/face-default.png",

        "selectedIconPath": "./icons/face-active.png"

      }

    ],

    "backgroundColor":"#FECA49",

    "color":"#D78B09",

    "selectedColor": "#ffffff"

  },

Index首页 / 轮播图

swiper

swiper-item

image

 小程序页面宽度一直是750rpx，需要UI出设计图就是750px，这样的话我们就知道该设计图下的其他细节的尺寸！对应小程序直接写为??rpx就OK！

List页面 / 数据、事件绑定、API

 

 

wx.showModal({

  title: '提示',

  content: '这是一个模态弹窗',

  // 点击按钮的执行函数；

  success (res) {

    if (res.confirm) {

      console.log('用户点击确定')

    } else if (res.cancel) {

      console.log('用户点击取消')

    }

  }

});

 

wx.chooseImage({

 // 选择几张照片

  count: 1,

  // 所选的图片的尺寸：原图，压缩图

  sizeType: ['original', 'compressed'],

  // 来源：相册、相机

  sourceType: ['album', 'camera'],

  // 选择其中一项后的回调

  success (res) {

  const tempFilePaths = res.tempFilePaths;

  }

});

Other页面 / 获取数据