小程序商城开发
2018-06-19 本文已影响0人
skymcl
课程介绍
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。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
image.png
2、页面目录结构
一个小程序页面由四个文件组成，分别是：
image.png
配置
1、全局配置
app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
image.png
image.png
2、子页面配置
创建页面
1、如何创建一个页面
2、页面的结构
组件介绍
1、web-view
2、表单
3、cover-view
4、swiper
5、image
api介绍
1、网络请求
2、数据缓存
3、交互反馈
4、设置导航条
5、设置tabBar
6、设置窗口背景
路由
4759adc3fbea1676ba36947eeefcdba.png
c63414fb9aaa4e403dd735beba363a7.png
可带参：navigateTo、redirectTo、reLaunch（path?key=value&key2=value2）
不可带参：switchTab （本地、全局变量）
传参
设置参数名data-title:
<view bindtap="toDetail" data-title="hello">
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);
模版
image.png
模块化
a0d7e3387a3d8befc425f8855da65f0.png
请求
8a2ac32f47afae0c06fc2316f21d4a0.png
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）
头像：一个月五次
介绍：一个月五次
服务类目：一个月三次
限制
不能分享到朋友圈
不能诱导分享
分享之后不能判断是否分享成功
不能主动推送消息通知
富文本效果不理想
