怎么制作小程序商城?本文将分为代码版和0代码版的小程序商城制作教程分享。

想看0代码快速制作小程序的企业、商家可以直接拉到文章底部开始阅读。

希望能帮到您。

 代码版小程序制作教程

一、为什么选择开发微信小程序？

1. 可在微信里面自由分享。

2. 不用下载 app，减少手机内存占用。

3. 能使用微信的 api 接口快速开发。

二、认识并创建 tarBar

• 认识 tarBartarBar 是移动端应用常见的页面效果，用于实现多个页面的快速切换，类似导航栏。创建时最少 2 个，最多 5 个 tarBar 标签页。其配置项包括位置（position）、边框颜色（borderStyle）、文字默认颜色（color）、文字选中颜色（selectedColor）、背景色（backgroundColor）以及 tab 页签列表（list）等。每个 tab 项的配置选项有页面路径（pagePath）、显示文字（text）、未选中时图标路径（iconPath）和选中时图标路径（selectedIconPath）等。最常用的是 iconPath 和 selectedIconPath。

• 创建 tarBar步骤如下：

• 打开 app.json 文件。

• 打开微信公众平台。

• 将官方的 tarBar 格式复制进 app.json。

• 打开平台找 tarBar 相关属性配置。以下是一个包含部分常用配置选项的 app.json 示例：

收起

json

复制

{

"pages": [

"pages/index/index",

"pages/logs/index"

],

"window": {

"navigationBarTitleText": "Demo"

},

"tabBar": {

"list": [

{

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

"text": "首页",

"iconPath": "images/tab1.png",

"selectedIconPath": "images/tab5.png"

},

{

"pagePath": "pages/food/food",

"text": "购物车",

"iconPath": "images/tab3.png",

"selectedIconPath": "images/tab7.png"

},

{

"pagePath": "pages/shop/shop",

"text": "产品",

"iconPath": "images/tab2.png",

"selectedIconPath": "images/tab6.png"

},

{

"pagePath": "pages/about/about",

"text": "我的",

"iconPath": "images/tab4.png",

"selectedIconPath": "images/tab8.png"

}

]

}

三、wxml 常用标签介绍

• 容器 - view在微信小程序中，view 标签用于布局，相当于 HTML 中的 div。可使用 class 属性指定样式类，使用 style 属性写入行内样式。

• 轮播图控件 - swiper在小程序中使用 swiper 组件创建滑块视图，需搭配 swiper-item 滑块使用。例如：

收起

xml

复制

<view>

<swiper autoplay="true" interval="3000" circular="true">

<swiper-item>

<image src="/images/1.jpg" class="slide-image"/>

</swiper-item>

<swiper-item>

<image src="/images/2.jpg" class="slide-image"/>

</swiper-item>

</swiper>

</view>

• 其中 autoplay 表示是否自动播放，interval 是与下一个滑块的间隔时长，circular 表示是否衔接滑动。

• 多选控件 - icon用于表示操作顺利完成。例如：

收起

xml

复制

<icon type="success" size="23"></icon>

<icon type="circle" size="23"></icon>

• type 是必备属性，用于控制是否选中（success 表示选中，circle 表示未选中），size 用来定义 icon 大小。

• 跳转 - navigator类似 HTML 中的 a 标签，用于跳转页面且可以传参。例如：

收起

xml

复制

<navigator url="跳转的页面路径">

点击跳转到目标页面

</navigator>

四、认识 & 使用模板与模块

• 模版 - template为什么需要模板？template 主要用于显示，可嵌入 wxml 代码，有对应的样式和逻辑，但没有对应的 js 文件，其逻辑依赖于引用的页面。

• 如何使用模板？导入模板框架：

收起

xml

复制

<import src="../../template/productlist/productlist.wxml"/>

<template is="模板名称" data="{{item}}"></template>

• 导入模板样式：

收起

css

复制

@import '../../template/productlist/productlist.wxss';

• 模块为什么需要模块？将复杂应用程序分解为独立模块，每个模块负责特定功能或业务逻辑。

• 如何创建模块？与创建 js 文件类似，把特定需要调用的数据装在 js 文件中并赋予新名字。例如：

收起

javascript

复制

var list = [

{

id: 1,

type: 0,

imgUrl: "../../images/item1.jpg",

title: "美容养颜"

},

{

id: 2,

type: 1,

imgUrl: "../../images/item2.jpg",

title: "保健调养"

}

];

module.exports = {

list: list

};

• 模块和普通 js 文件相比，重要的是将 list 数组暴露出去（module.exports = {list: list}），以便外部文件调用。

• 如何使用模块？导入模块：

收起

javascript

复制

require("…/ …/ comment/typedata.js");

• 使用模块：

收起

javascript

复制

var myData = require("../../comment/typedata.js");

Page({

data: {

typeData: myData.list //分类导航数据

}

});

五、如何绑定 & 修改数据？

• 定义数据小程序中的 data 是一个对象，页面中涉及的变量要在 data 中定义。例如：

收起

javascript

复制

Page({

data: {

ipOpen: true,

name: "olive"

}

});

• 绑定数据内容绑定：

收起

xml

复制

<view>{{属性名}}</view>

<view>{{item}}</view>

• 属性绑定：

收起

xml

复制

<input value="{{属性名}}"/>

<input value="{{item}}"/>

• 数据修改通常获取有效数据后需追加或替换原有数据，常用 this.setData 方法。例如：

收起

javascript

复制

this.setData({

list: list

});

• 事件绑定当用户进行操作时，对应的事件会被触发并执行相应事件处理函数。常用事件类型有点击（bindtap）、长按（bindlongtap）、输入（bindinput）、表单提交（bindsubmit）、滚动到底部（bindscrolltolower）和选择器改变（bindchange）。例如：

收起

xml

复制

<view class="list {{isTouchMove?'touch-move':''}}"

bindtouchstart="touchstart"

bindtouchmove="touchmove">

• class 选择器的三元表达式例如：

收起

xml

复制

<view class="list {{isTouchMove?'touch-move':''}}"></view>

• 含义是在选择器为 list 的元素中，检索 isTouchMove，为 true 则给 list 添加‘touch-move’样式，为 false 则添加 “”（空）。

六、如何将数据渲染到页面？

• 条件渲染使用 wx:if、wx:elif、wx:else 属性判断是否数据绑定当前组件。例如：

收起

xml

复制

<view wx:if="age>40">1</view>

<view wx:elif="age==40">2</view>

<view wx:else>3</view>

• 列表渲染可理解为 for 循环，不断遍历数组并将内容通过 {{}} 输出到页面。例如：

收起

xml

复制

<元素 wx.for=[[列表项}}> {{item)), {{index)} </元素>（内部自己定义的item, index）

或简单格式如：

<view class="item" wx:for="{{showData}}">

<view class="td">

{{item.MTId}} {{item.status}}

</view>

</view>

七、页面如何实现跳转传参？

• 拼接 URL 传参URL 传参利用 navigate 标签，如 navigate 标签 + URL 地址 + 参数（url = “…/…/indexDetail?id=3”）。

• 小程序 api 传参给容器定义一个 bind 事件，触发时带着参数传给 js。例如：

收起

xml

复制

<!-- 商品列表信息展示-->

<view class="wrapper"></view>

<view class="list" wx:for="{{listArr}}" wx:key="index"bind:tap="tiao" data-id="{{item.id}}">

<view class="title">{{item.title}}</view>

<view class="content>

<image src="{{item.image}"></image>

<view class="text>

<view class=desc">{{item.desc]}</view>

<view class="num><text>{{item.readNum}}</text>阅读</view>

</view>

</view>

</view>

javascript

复制

tiao : function (e) {

wx.navigateTo({

url : '../indexDetail/indexDetail?id=' + e.currentTarget.dataset.id,

});

}

• 全局变量传参什么是全局变量？作用于全局的变量，当一个变量在多个页面使用时，可定义为全局变量。

• 使用方法定义：在 app.js 中定义，如

收起

javascript

复制

//app.js

App({

globalData : { //全局变量

city : "广州"

}

});

• 使用：

收起

javascript

复制

var app = getApp();

app.globalData.city = city;

• 本地存储传参什么是本地存储？存储在本地的数据（永久保存）。

• 使用方法

收起

javascript

复制

wx.setStorageSync("key", "value") //设置本地存储

wx.getStorageSync("key") //获取本地存储

wx.removeStorageSync("key") //删除本地存储

wx.clearStorageSync("key") //清空本地存储

八、如何获取数据？

• 使用 wx.request 向指定域名发送 http 请求，需在微信小程序管理后台中加入指定域名。例如：

收起

javascript

复制

wx.request({

url : "http://iwenwiki.com:3002/data",

method : 'GET/POST',

data : {

id : 1

},

success : res => {

console.log("数据请求成功");

}

});

• 为防止报错，可勾选不校验域名。

九、页面常用交互

• wx.onLoad()onLoad () 发起请求。

• wx.onReady()onReady () 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景。

• wx.onShow()onShow () 动态更新数据或状态。

• wx.onHide()onHide 在页面处于不见状态时执行，常用于销毁长时间运行的任务，如定时器。

• wx.onReachBottom()页面下滑事件，下滑到底部触发。

• wx.onPullDownRefresh()页面下拉事件，下拉到顶部触发。

十、封装

• 概念：将抽象得到的数据和行为（或功能）相结合，形成一个有机的整体，即把数据与操作数据的源代码进行有机结合形成 “类”，其中数据和函数都是类的成员。目的是增强安全性和简化编程，使其更加直观清晰、方便简洁。

——————————————————————————

审核通过之后，你的客户就能够正式用上你的小程序了。

-

往上阅读 - 申请通过后回来绑定，绑定好之后，可以返回到小程序设计页面中，点击一下审核。

没有的话就可以通过这个后台，去那些小程序平台上去注册一个账号，根据平台的提示完成小程序账号申请。

一个是你已经有小程序账号的，可以直接绑定。

往上阅读 - 在后台的话你可以点击小程序绑定的一个模块，里面会有两种方式给到大家去绑定小程序。

4.怎么制作小程序商城 - 绑定小程序商城账号（往上阅读）

-

然后接下来是最后一个步骤了，只需要完成了这个步骤，你的小程序就能够正式被你的客户所使用上。

-

可以点击网页的右上角来保存你的小程序制作进度。

往上阅读 - 其他功能其他模块都是相同的一个操作方式，大家可以亲自去尝试一下，非常简单。

也可以在这模块里面直接添加，勾选好后，你就可以看到小程序页面中已经出现了你已经添加好的产品。

往上阅读 - 这些产品是存在在你的产品库里的，你可以优先在后台上添加。

点击产品展示模块中的一个添加产品按钮，页面的右侧就会出现的一个提示，在这里面你可以勾选你想要添加到这个产品展示模块里的产品。

就像画面当中一样，我点击了产品展示模块，然后把它拖动到小程序页面中。

往上阅读 - 所有功能添加的方式都是一样的，非常容易添加。只需要你把你的鼠标，移动到那个模块上，然后摁下你的鼠标左键，然后拖动到小程序页面中，通过页面右侧的提示栏调整参数，即可完成功能的添加和设置。

3.怎么制作小程序商城 - 小程序商城设计（往上阅读）

-

所以接下来，我会以添加产品展示功能，作为小程序设计的操作举例。

对于企业类型的小程序来说，产品展示这个模块是必不可少的，产品分类、产品图片展示、视频这些模块在当前来说是必不可少的，无论是卖货小程序还是其他类型的小程序。

-

往上阅读 - 轻站教育门店通这些产品的套用小程序模板的操作也是一样的，大家可以去试一试，不用担心不会操作。

那这个选中了的小程序模板，就会马上套用到你的小程序设计页面上了。

觉得满意合适的话，可以点击马上替换。

看到心仪的模板之后呢，可以把你的鼠标移动到那个模板上，点击一下预览按钮。

往上阅读 - 进入到一个选取小程序模板的一个环节，因为我这次举例的是商城小程序，里面的模板基本都是用于卖货的。行业覆盖了日用百货、生鲜蔬果，电商，超市等主流的卖货行业，大家可以根据自己店铺或者企业所处的行业，来进行一个小程序模板的选择。

我们会点击网页右侧的，一个小程序商城中的前往装修按钮。

完成信息填写。

2.怎么制作小程序商城 - 套用小程序商城模板（往上阅读）

-

往上阅读 - 那接下来我会以一个卖货小程序作为一个接下来的步骤讲解，其他产品的操作都是大同小异的，大家可以参考一下。

-

如果你是想制作企业展示小程序，可以开通轻站产品。

如果你其实想制作卖货小程序，可以开通商城产品。

如果你想制作点餐小程序，或门店服务预约小程序的话，可以开通门店通产品。

如果你是想制作一个教育机构的小程序的话，可以开通教育产品。

-

往上阅读 - 完成账号注册后，接下来可以根据大家不同的需求去做一个小程序。可以进入到【企业中心】页面，在里面开通对应产品来制作对应类型的小程序。

-

这样就可以完成一个小程序制作账号的注册了。

根据网页提示，完成一个信息的录入。

往上阅读 - 我们可以点击右上角的免费注册按钮。

我们会进入到一个充满小程序模板的一个网页，它的小程序模板是按行业来分类的，可以根据你想要制作的类型来去选择。

往上阅读 - 将鼠标移动至网站横幅主题【小程序制作】图片，点击【了解更多】

往上阅读 - 百度搜索结果如上：点击进入官网

往上阅读 - 必应搜索结果以上：点击进入官网

（搜索引擎建议使用必应/百度）电脑搜！电脑搜！电脑搜！

这个小程序制作平台，开发票、签合同，有上市公司做背景，还有售前售后专员跟进，信任从这一刻开始。

打开电脑浏览器，打开搜索引擎，搜索图中关键词，点击进入平台官网。

这个账号很重要，和你的手机号一样重要，因为它关联着你的小程序设计，内容，数据以及你后续想更新小程序上的产品或者做改动，都需要通过这个小程序制作账号去实现，所以要记录好账号的信息，选择靠谱的小程序制作平台。

1. 怎么制作小程序商城 - 注册一个小程序制作平台账号（往上阅读）

低至每年500元就能够拥有自己的小程序，仅需4个步骤。

无论是想用来卖货，还是用来做企业信息展示、服务预约或者是扫码点餐，通通都能轻松实现。

不写一行代码，怎么制作企业类型小程序呢？

0代码的小程序商城制作教程：（往上阅读）