微信小程序电商实战-入门篇

一壶清酒 2017-12-06 16:52:28 ⋅ 144 阅读

小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html

好了我们开始小程序实战吧!
第一步:开发工具下载

下载开发工具:微信开发者工具

第二步:创建小程序项目

1、选择“小程序”开发模式

安装完成后,选择“小程序项目”

2、添加项目

点击“添加”

3、项目配置

如果没有AppID 点击“可点此体验”也可以哦

申请AppID:https://mp.weixin.qq.com/wxopen/waregister?action=step1

4、完成

开发区域

备注:因为申请测试会占用测试机器资源,所以一个 APPID 一天只能申请一次测试报告。

第三步:代码结构

项目里边生成了不同类型的文件:

.json 后缀的 JSON 配置文件
app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

.wxml 后缀的 WXML 模板文件
从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。

.wxss 后缀的 WXSS 样式文件
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

.js 后缀的 JS 脚本逻辑文件
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

详情可以查看微信官方文档:微信小程序代码构成

总结

以上内容大家都看了都非常简单,更详细的可以参考微信官方文档,根据以上步骤可以搭建自己的第一个微信小程序,大家可以对生成的初始代码可以做一些细微的调整,比如看一下如何获取微信用户信息(userInfo),log日志如何打印,页面怎么跳转等。

下期预告

啥也不说,先看图


主要实现功能点:

1、首页搜索(用到了template 模板技术)

2、头部导航栏

3、首页Banner轮播(使用swiper)

4、左右商品滑动(使用scroll-view)

5、商品加载更多

6、购物车+个人中心浮动布局

备注:请大家持续“IT实战联盟”哦~



全部评论: 0

    我有话说:

    程序实战-首页(上)

    上一程序实战-入门 嗨,大家好!经过近两周的精心准备终于开始程序实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实战-首页(下)

    上一程序实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序实战-购物车(上)

    好久没更新程序实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序教程推出.......

    程序实战:商品属性联动选择(案例)

    本期的程序实战来做一个网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序实战-购物车(下)

    我们继续接着昨天的购物车写,主要把剩下的数量加减 template 模板、选中计算功能实现掉!

    程序实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序实战-商品详情加入购物车(下)

    今天会接着上一开始写商品详情页加入购物车的部分,直接看效果......

    程序商城(三):首页福利专场无限下拉刷新动态API数据实现

    首页第5个模块-福利专场,通过https调用API数据模型来实现无限下拉刷新......

    程序实战:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序实战:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序实战程序之页面数据传递

    我们在写程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    程序实战实现抖音评论效果

    我们在写程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的。本文教大家做一个抖音评论效果的程序......

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    程序商城(九):授权并实现个人中心页面页面

    实现商城的授权并获取用户信息和个人中心页面布局

    程序抖音实战-首页(下)

    抖音程序首页动态数据获取