零基础微信小程序开发及示例详解（微信小程序开发示例教程）

本文提供了微信小程序的相关知识。 我们主要介绍微信小程序开发步骤以及主要流程的详细讲解。 我希望这对你有帮助。

【相关学习推荐：小程序学习教程】

目前，小程序行业是互联网营销中的热门黑马之一。变得。 依托大玩家的流量平台和小程序行业，拥有天然的用户基础和得天独厚的资源优势。 凭借其方便、快捷的操作性和简单、流行的模式，它在短短一年内就实现了爆发式增长。 目前市面上开发一个小程序，开发成本从几千到几万不等。 以腾讯云为例，一款由腾讯官方团队设计并立即投入运营的小程序，售价将在680-3680/年。 我们暂时不谈设计复杂的小程序，先从设计最简单的程序开始。 开发小程序有两种方法。 一是定制开发，二是第三方平台开发。 定制开发的价格比较高，从几万到几十万不等，开发周期长。 第三方平台的开发价格相对较低，一些功能几千美元就可以开发出来。 最重要的是，开发周期短，一周左右即可完成。 在线操作。

1.微信小程序开发必备技术 1、HTML语言

HTML是超文本标记语言的缩写。 HTML主要负责网页的骨架。 就像动物的骨骼一样，HTML 语言是支持网页布局的骨骼。

2. CSS

CSS 代表层叠样式表，CSS 主要允许您控制网页的样式、网页内容的分布方式、部分背景、颜色和其他外观问题。

3. JavaScript

JS 的缩写：动态脚本语言。 此前，JS只是一种用于与网页交互的脚本语言。 Google v8引擎、Angular、React等前端框架使得前后端分离的趋势越来越明显。 随着Node、JS等技术的发展，JS也出现在服务器端。 它充满活力，是当今最活跃的语言之一。

4. 服务器语言

如果您不是专业的后端开发人员，后端可能会很困难并且学习曲线很陡。 不过，我们鼓励开发人员学习后端语言。 最起码你应该了解大概的原理框架，能够理解它的代码逻辑。这样不仅可以让前端和后端很好的配合，而且当小程序出现bug时也可以使用。 常用的服务器语言有很多，如PHP、Java、Python、ASP等技术。 鼓励初学者根据自己的需要进行选择和学习。

5.数据库语言

如果你正在开发一个数据量不大、结构也不复杂的小程序，数据库语言就相对简单。 一般来说，你可以通过学习一些常用命令和常见问题来处理这个问题。 使用。 常用的数据库包括免费的MySQL、msSQL、MongoDB、Oracle等数据库。 如果数据量很大，小程序首屏可能会出现白页。 这个时候就必须考虑优化。

注：开发软件的具体实现也是如此。 每个软件都有自己的特点，语言的标准规则也有些不同。 常见的开发工具有微信开发者工具、字节跳动开发者工具、Sublime Text 3。 这里我们使用微信开发者工具。

2.微信开发者工具 1.

下载安装百度“微信公众平台”，选择小程序，在开发者工具中选择对应版本，安装64位稳定版即可下载安装。

2、新建一个项目

在启动页面输入项目名称、目录、AppID（选择你的测试号）

这是基本框架 Tools 自带的启动日志好了，我们开始了解小程序开发的框架

3.程序框架

根目录下的两个文件夹Pages用来存放页面文件就可以了。 utils是用来存放公共文件js的文件夹。 Applet 分为两个主要部分：主页和分页。 首页是您登录后看到的第一个页面。 主页和分页各占用一个文件夹，并且都包含在 Pages 文件夹中。 显然，初始化的小程序只有两个页面：主页索引和日志页面。 索引还包括设计主页界面所需的文件（index.js、index.json、index.wxss、index.wxml）。 Index.js是一个类似于js文档的逻辑主页文件。 Index.json是主页逻辑文件。 标题词、背景等配置文件 index.wxss是一个类似于CSS文档的主页样式表文件。 在dex.wxml 是第一个类似于 HTML 文档的页面结构文件。 同样，日志文件logs基本上都是index（如果添加新页面，需要在页面文件下添加新文件夹）和app.js、app.json、app.wxss、project类似。 。 ，根目录下的Sitemap.json是小程序的全局设置。

app.js是项目的入口文件，用于创建应用对象，在小程序启动时首先被调用。 app.json是当前小程序的全局变量，包含小程序的页面路径和界面。 性能、底部选项卡等 app.wxss是小程序的公共样式表。 开发者可以直接在页面组件的类属性中使用app.wxss中声明的样式规则。 project.config.json 是项目配置文件。 通俗地说，就是在开发项目之初的一组个性化设置，包括编辑器颜色、代码上传自动压缩以及一组选项等。 sitemap.json用于配置小程序及其页面是否允许被微信索引。 文件的内容是 JSON 对象。 如果 sitemap.json 不存在，则默认情况下允许对所有页面建立索引。

创建开发者工具项目后，一些常用代码会自动提取到单独的js（utils.js）文件中。 作为一个模块。 也就是说，utils文件夹是用来存放你自己封装的工具函数，这些函数是共享方法。

4. 程序调试区

程序调试区有几种常用的调试模式。

1. Console

控制台是可以显示错误信息和输出变量信息的控制台。

p>2.Wxml

Wxml相当于HTML+CSS。 左边的区域是HTML语言+CSS标签属性的一部分。 在右侧轻松设置 CSS 属性。

3.Source

Source显示当前项目的所有脚本文件，微信小程序框架编译这些脚本文件。

4. 网络

网络用于显示网络相关信息。 这里没有网络请求。

5.AppData

AppData 显示当前项目显示的具体数据。 数据在这里编译并实时显示在页面上。

三、项目实践（附核心代码） 1.项目介绍

创建使用我做的微信开发者工具创建一个最基本的小程序“太行精灵”（微信直接搜索）。 其功能仅用于展示，不具有商业功能。

这是首页的效果图：

2、项目框架

“太行精灵”小程序包括首页索引、内容页检测、个人主页设置、登录及注册页面登录、签到页面日历、扫码支付页面

>1.index1)index.jsvar api = require('../../utils/api.js')var app = getApp()Page({ 数据 : { 列表: [ { 'id' : '1', 'image': '/img/1.jpg', 'title': '太行读书秀 | 长治上党县【详细了解长治红色旅游景点】', 'num' :'304', 'state' : '进行中', '时间': '4月21日17:59', '地址': '长治市泸州区' }, { 'id': '2', 'image': '/img/2.jpg', 'title': '长治、吴乡、革命圣地', 'num': '380', 'state': '结束', 'time': '四月15日17:39', '地址': '长治市/武乡县' }, { 'id': '3', 'image': '/img/3.jpg', 'title': '沁源灵空山美景', 'num': '500', 'state': '进行中', 'time': '2月4日17:31', '地址': '长治市/沁源县' }, { 'id': '4', 'image': '/img/4.jpg', 'title': '革命太行邀您'与世界对话'', 'num': '150', 'state': '进行中', '时间': '5月09日17:21', '地址': '长治市/泸州区' }, { 'id': '5', 'image': '/img/5.jpg', 'title': '洪太行/太行山革命区', 'num':'217', 'state':'进行中', '时间': '10月09日 16:59', '地址': '长治市泸州区' } ], list: [ { 'id' : '1', 'image': '/img/1.jpg', 'title': '太行读书秀 | 长治上都州【深入了解长治红色旅游景点】', 'num':'304', 'state':'进行中', '时间': '10月9日17:59', '地址': '昌吉市/泸州区' }, { 'id': '2 '， '我是age': '/img/2.jpg', 'title': '长治、吴乡、革命圣地', 'num': '380', 'state': '结束', 'time': '10/ 17 Mon 9 :39', 'address': '长治市/武乡县' }, { 'id': '3', 'image': '/img/3.jpg', 'title': '沁源灵空山之美', 'num':'500', 'state':'进行中', '时间': '10月9日17:31', '地址': '长治市·沁源县' }, { 'id': '4', 'image': '/img/4.jpg', 'title': '革命太行邀您‘与世界对话’'', 'num':'150', 'state':'结束', '时间': '10月9日 17:21', '地址': '昌吉市/泸州区' }, { 'id': ' 5', 'image': '/img/5.jpg', 'title': '洪太行及太行山革命地区', 'num': '217', 'state': '进行中', '时间': '10月9日16:59', '地址': '长治市泸州区' } ], imgUrls: [ '/img/26.jpg', '/img/13.jpg', '/img/28.jpg', '/img/14.jpg', '/img/24.jpg', '/img/15.jpg', '/img/27.jpg', '/img/27.jpg', '/img/16.jpg' ] }, onLoad () { var that = this app.getSystemInfo(function(res) { that.setData({ systemInfo: res }) }) that.setData({ _api: api }) this.getSwipers() this.pullUpLoad() }, /** * */ getSwipers () { api.get(api .SWIPERS) .then(res => { this.setData({ swipers: res.data.ads }) }) }, scrollR: function(e){ this.setData({ list: this.data.lists.concat(this.data.list), }); }, onLoad: function (e) { this.scrollR (e); }, Scroll: function(e){ this.scrollR(this.data.offset); }, //页面跳转函数(在wxml中搜索bindtap="go2detail) go2detail: function(param){ wx.navigateTo({ url: '/pages/discovery/discovery', }) }})2)index.json{ "usingComponents": {}}3)index.wxml 太行精灵在这里等你推荐 {{list.title}} {{list.state}}{{list.num}}注册人数 {{list.address}} |{{list.time}} 4)index.wxss/**index.wxss**/page{高度: 100%;背景-颜色: #efeff4;}滚动-视图{ 高度：100%;}.swiper{ 顶部：0px; 宽度：100%;}.swiper swiper{高度： 240px;}.slide-图片{ 宽度：100%;}.mobi_title{font-尺寸：15px;颜色：#777; 行-高度：110%；宽度：100%; -颜色：#f3f3f3；相对；}.mobi_icon{填充：0px 1.5px； 边框：1.5px；-颜色：#ff7777；位置：相对；边距-右：5px；}/*list*/.list{溢出：隐藏；宽度：100%；填充：0 20px 0 0；边框-顶部：1px 实心#eeeeee；背景-颜色：#fff；边距-底部： 15px;}.list-img{位置：相对;浮动：左;宽度：120px;}.list-img .video-img{宽度：120px;高度：120px }.list-;详细信息{位置：绝对；边距-顶部：15px； 135px; margin-right: 10px;}.list-title text{word-break: Break-all; text-overflow: ellipsis; -webkit-box-方向：垂直；-webkit-line-clamp：2； 隐藏；字体-大小：17像素；字体-粗细：粗体；行-高度：120%；}.list-标签view.state{显示：块； k3] 尺寸：11px；颜色：#81aaf7;width：50px；边框：1px 实心#93b9ff；边框-对齐：中心；浮动：左；}.list- 标签.join{字体-大小：13px；行-高度：120%； 颜色：#bbb；显示：内边距：10px 0 0 20px;}.list-tag .list-num{font-大小：16px； -信息{ 字体-大小：13px；颜色：#bbb；行-高度： 110%; 字体-权重:正常;边距-顶部:40px;}2.app.json{ "pages": [ "pages/index/index", "pages/setting/setting", "pages/登录/登录" ", "pages/please /please", "pages/Calendar/Calendar", "pages/discovery/discovery" ], "window": { "backgroundTextStyle": "浅色";, "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "粗体精灵", "navigationBarTextStyle": "黑色" }, "tabBar": { "color": "#a0a0a0", "selectedColor": "#ec5c30 ”，“背景颜色”：“#f2f2f2”，“边框样式”： "white", "list": [ { "pagePath": "pages/index/index", "text": "主页", "iconPath": "img/shouye.png", "selectedIconPath": "img/ shouye1 .png" }, { "pagePath": "页面/设置/设置", "text": "我的", "iconPath";: "img/me.png", "selectedIconPath": "img/me1.png" } ] }, "debug": true, "sitemapLocation": "sitemap.json"}

以上代码仅供参考仅仅。 您可以参考以下文档链接： 微信小程序官方文档小程序框架

3.启动项目

进入并注册微信公众平台、小程序。 注册完成后，将创建一个 AppID。 将旧的测试帐户替换为新 ID。 重新开放微信开发者工具。 编辑区域上方会出现上传按钮。 上传成功后，您将进入微信公众平台。 将显示开发版本并发送以供审核。 需要 30 分钟。 大约10分钟后，审核通过后将通知您提交审核版本。 大约 10 分钟后，您将看到一个在线小程序。

【相关学习推荐：小程序开发教程】

下载微信客户端

微信是一款可以通过手机网络发送语音消息、视频、照片、文字的移动通讯软件，支持 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 微信小程序开发底部导航
• 浅析如何自定义微信小程序组件（在小程序中使用自定义组件和模板）
• 总结整理微信小程序常用表单组件（微信小程序表单设计）
• 总结分享微信小程序常见面试题（微信小程序面试题）
• 轻松分析微信小程序元素（微信小程序配置）

本文由主机参考刊发，转载请注明：零基础微信小程序开发及示例详解（微信小程序开发示例教程） https://zhujicankao.com/141376.html