小程序商城开发

课程介绍

1、如何搭建一个小程序,并发布
2、如何开发自己的商城

必备的前端知识点

1、html
2、css
3、js

开发前准备

1、申请帐号

点击(https://mp.weixin.qq.com/wxopen/waregister?action=step1)
根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

2、安装开发工具
  https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=2018614

小程序结构

1、目录

1、文件结构

 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
小程序商城开发_第1张图片
image.png

2、页面目录结构

一个小程序页面由四个文件组成,分别是:
小程序商城开发_第2张图片
image.png

配置

1、全局配置

app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
小程序商城开发_第3张图片
image.png
小程序商城开发_第4张图片
image.png

2、子页面配置

创建页面

1、如何创建一个页面
2、页面的结构

组件介绍

1、web-view
2、表单
3、cover-view
4、swiper
5、image

api介绍

1、网络请求
2、数据缓存
3、交互反馈
4、设置导航条
5、设置tabBar
6、设置窗口背景

路由

小程序商城开发_第5张图片
4759adc3fbea1676ba36947eeefcdba.png
小程序商城开发_第6张图片
c63414fb9aaa4e403dd735beba363a7.png
可带参:navigateTo、redirectTo、reLaunch(path?key=value&key2=value2)

不可带参:switchTab (本地、全局变量)

传参

设置参数名data-title:


toDetail:function(e){
    var gettitle=e.currentTarget.dataset.title;(获取传过来的参数)
  
    带参数跳转:
     wx.navigateTo({
         url:"../detail/detail?title="+gettitle
     })
   }

数组传参:   url: "../detail/detail?title=" + JSON.stringify(arr)

获取传递过来的参数

Page({
  data:{
    title:''
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
        title:options.title
    })
  },
})

接收数组参:var str = JSON.parse(options.title);

模版

小程序商城开发_第7张图片
image.png

模块化

小程序商城开发_第8张图片
a0d7e3387a3d8befc425f8855da65f0.png

请求

小程序商城开发_第9张图片
8a2ac32f47afae0c06fc2316f21d4a0.png
小程序商城开发_第10张图片
935bf5c30bdfa123226183662e8a29c.png
function myrequest(data, path, method, cb) {
    wx.request({
        url: purl + path,
        header: { 'content-type': 'application/x-www-form-urlencoded' },
        data: data,
        method: method,
        success: function(res) {
            if (typeof cb == "function") {
                cb(res.data);
            }
        },
    })
}
module.exports = {
    myrequest: myrequest,
}

数据处理

引入请求方法:var util = require('../../utils/util.js');//不能用绝对路径

调用方法: // 获取详情
    getDetail: function() {
        util.myrequest({ id: this.data.id }, '/exhibition/detail', 'GET', (res) => {
            this.setData({
                newDetail: res.datas
            })

        })
    },

使用:this.data.datas.key

admin数据字典建设

1、数据表的创建
2、需要哪些基本表

商城讲解

通过商城把上诉内容串联是来
  分类
  详情
  购物车
  订单
  收藏
  足迹
 个人信息

支付

小程序如何使用微信支付

flex布局

Flex 布局教程:语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局教程:实例篇
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

商城练习

使用教程提供的接口,开发一个简易商城,并发布

注意点

背景图片:不能使用本地图片
code:一个code智能使用一次
保存:不能使用线上路径(先下载后保存)
navigateTo:最多5级目录跳转
图片上传:需要配置安全证书
请求数量:不能超过十个并发实际五个
改名:发布前可以改两次发布之后不可以更改(重新认证交300)
头像:一个月五次
介绍:一个月五次
服务类目:一个月三次

限制

不能分享到朋友圈
不能诱导分享
分享之后不能判断是否分享成功
不能主动推送消息通知
富文本效果不理想

你可能感兴趣的:(小程序商城开发)