本文将分为代码版和0代码版的小程序制作教程分享。
想看0代码快速制作小程序的企业、商家可以直接拉到文章底部开始阅读。
希望能帮到您。谢谢！
一、为什么选择开发微信小程序？
- 可在微信里面自由分享。
- 不用下载 app，减少手机内存占用。
- 能使用微信的 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="https://blog.csdn.net/fkseo/template/productlist/productlist.wxml"/>
<template is="模板名称" data="{{item}}"></template>
- 导入模板样式：
收起
css
复制
@import 'https://blog.csdn.net/fkseo/template/productlist/productlist.wxss';
- 模块为什么需要模块？将复杂应用程序分解为独立模块，每个模块负责特定功能或业务逻辑。
- 如何创建模块？与创建 js 文件类似，把特定需要调用的数据装在 js 文件中并赋予新名字。例如：
收起
javascript
复制
var list = [
{
id: 1,
type: 0,
imgUrl: "https://blog.csdn.net/fkseo/images/item1.jpg",
title: "美容养颜"
},
{
id: 2,
type: 1,
imgUrl: "https://blog.csdn.net/fkseo/images/item2.jpg",
title: "保健调养"
}
];
module.exports = {
list: list
};
- 模块和普通 js 文件相比，重要的是将 list 数组暴露出去（module.exports = {list: list}），以便外部文件调用。
- 如何使用模块？导入模块：
收起
javascript
复制
require("…/ …/ comment/typedata.js");
- 使用模块：
收起
javascript
复制
var myData = require("https://blog.csdn.net/fkseo/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 : 'https://blog.csdn.net/fkseo/article/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()页面下拉事件，下拉到顶部触发。
十、封装
- 概念：将抽象得到的数据和行为（或功能）相结合，形成一个有机的整体，即把数据与操作数据的源代码进行有机结合形成 “类”，其中数据和函数都是类的成员。目的是增强安全性和简化编程，使其更加直观清晰、方便简洁。
——————————————————————————
审核通过之后，你的客户就能够正式用上你的小程序了。
-
往上阅读 - 申请通过后回来绑定，绑定好之后，可以返回到小程序设计页面中，点击一下审核。
没有的话就可以通过这个后台，去那些小程序平台上去注册一个账号，根据平台的提示完成小程序账号申请。
一个是你已经有小程序账号的，可以直接绑定。
往上阅读 - 在后台的话你可以点击小程序绑定的一个模块，里面会有两种方式给到大家去绑定小程序。
-
然后接下来是最后一个步骤了，只需要完成了这个步骤，你的小程序就能够正式被你的客户所使用上。
-
可以点击网页的右上角来保存你的小程序制作进度。
往上阅读 - 其他功能其他模块都是相同的一个操作方式，大家可以亲自去尝试一下，非常简单。
也可以在这模块里面直接添加，勾选好后，你就可以看到小程序页面中已经出现了你已经添加好的产品。
往上阅读 - 这些产品是存在在你的产品库里的，你可以优先在后台上添加。
点击产品展示模块中的一个添加产品按钮，页面的右侧就会出现的一个提示，在这里面你可以勾选你想要添加到这个产品展示模块里的产品。
就像画面当中一样，我点击了产品展示模块，然后把它拖动到小程序页面中。
往上阅读 - 所有功能添加的方式都是一样的，非常容易添加。只需要你把你的鼠标，移动到那个模块上，然后摁下你的鼠标左键，然后拖动到小程序页面中，通过页面右侧的提示栏调整参数，即可完成功能的添加和设置。
-
所以接下来，我会以添加产品展示功能，作为小程序设计的操作举例。
对于企业类型的小程序来说，产品展示这个模块是必不可少的，产品分类、产品图片展示、视频这些模块在当前来说是必不可少的，无论是卖货小程序还是其他类型的小程序。
-
往上阅读 - 轻站教育门店通这些产品的套用小程序模板的操作也是一样的，大家可以去试一试，不用担心不会操作。
那这个选中了的小程序模板，就会马上套用到你的小程序设计页面上了。
觉得满意合适的话，可以点击马上替换。
看到心仪的模板之后呢，可以把你的鼠标移动到那个模板上，点击一下预览按钮。
往上阅读 - 进入到一个选取小程序模板的一个环节，因为我这次举例的是商城小程序，里面的模板基本都是用于卖货的。行业覆盖了日用百货、生鲜蔬果，电商，超市等主流的卖货行业，大家可以根据自己店铺或者企业所处的行业，来进行一个小程序模板的选择。
我们会点击网页右侧的，一个小程序商城中的前往装修按钮。
完成信息填写。
-
往上阅读 - 那接下来我会以一个卖货小程序作为一个接下来的步骤讲解，其他产品的操作都是大同小异的，大家可以参考一下。
-
如果你是想制作企业展示小程序，可以开通轻站产品。
如果你其实想制作卖货小程序，可以开通商城产品。
如果你想制作点餐小程序，或门店服务预约小程序的话，可以开通门店通产品。
如果你是想制作一个教育机构的小程序的话，可以开通教育产品。
-
往上阅读 - 完成账号注册后，接下来可以根据大家不同的需求去做一个小程序。可以进入到【企业中心】页面，在里面开通对应产品来制作对应类型的小程序。
-
这样就可以完成一个小程序制作账号的注册了。
根据网页提示，完成一个信息的录入。
往上阅读 - 我们可以点击右上角的免费注册按钮。
我们会进入到一个充满小程序模板的一个网页，它的小程序模板是按行业来分类的，可以根据你想要制作的类型来去选择。
往上阅读 - 将鼠标移动至网站横幅主题【小程序制作】图片，点击【了解更多】
往上阅读 - 百度搜索结果如上：点击进入官网
往上阅读 - 必应搜索结果以上：点击进入官网
（搜索引擎建议使用必应/百度）电脑搜！电脑搜！电脑搜！
这个小程序制作平台，开发票、签合同，有上市公司做背景，还有售前售后专员跟进，信任从这一刻开始。
打开电脑浏览器，打开搜索引擎，搜索图中关键词，点击进入平台官网。
这个账号很重要，和你的手机号一样重要，因为它关联着你的小程序设计，内容，数据以及你后续想更新小程序上的产品或者做改动，都需要通过这个小程序制作账号去实现，所以要记录好账号的信息，选择靠谱的小程序制作平台。
无论是想用来卖货，还是用来做企业信息展示、服务预约或者是扫码点餐，通通都能轻松实现，低至每年349元就能够拥有自己的小程序，仅需4个步骤。
不写一行代码，怎么制作企业类型小程序呢？
到此这篇程序制作教程（微信小程序制作教程）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/hd-wfwjg/69567.html