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

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

本篇文章给大家带来了关于

微信小程序

的相关知识，主要介绍了微信小程序的开发步骤以及主要的过程详解，希望对大家有帮助。

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

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

一、微信小程序开发必备技术

一、HTML语言

HTML就是超文本标记语言的简写，HTML主要负责网页的骨架，就如同动物的骨架一样，HTML语言就是支撑网页布局的骨架。

二、CSS

CSS，是层叠样式表的简写，主要负责网页样式，网页内容如何分布，板块背景，颜色等外观问题可以有CSS控制。

三、JavaScript

简称js，是一种动态的脚本语言。在以前js仅仅是用于网页交互的脚本语言，随着Google v8引擎、angular、react等前端框架使得前后端分离的趋势愈加明显以及node、js等技术的开发使得js在服务器端也迸发出非凡的活力，成为当前非常活跃的语言之一。

四、服务器语言

如果不是专业的后端开发者，可能后端有一定的难度其学习曲线较陡。但是，仍然建议开发者学习一下后端语言，至少需要了解大致的原因框架，能够看懂其代码逻辑，这样不仅可以很好的实现前后端的配合，也能够在小程序出现bug的时候扯皮用。服务器的语言有很多比较常用的是PHP、Java、Python、ASP等技术，建议初学者根据具体需求挑选进行学习。

五、数据库语言

如果你开发的小程序数据量不大，架构不复杂的话数据库语言相对来说是比较简单的，一般学会一些常用的命令以及常出现的问题就能够应付使用。常用的数据库有免费的MySQL、msSQL、MongoDB、Oracle等数据库。若数据量非常庞大，很容易导致小程序首屏白页，这时就要考虑优化。

注：具体落实到开发软件上，大同小异，每款软件都有他们的特点，语言标准规则有些不同，常见的开发工具有：微信开发者工具、字节跳动开发者工具、Sublime Text 3。这里我们使用微信开发者工具。

二、微信开发者工具

一、-安装

二、新建项目

在启动页填写项目名称、目录、AppID（选择测试号）

三、程序框架

四、程序调试区

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

1.Console

2.Wxml

3.Sources

4.Network

5.AppData

三、项目实战（附核心代码）

一、项目介绍

利用微信开发者工具制作了一个最基础的小程序“太行精灵”（微信直接搜索），功能仅为展示，无任何商业功能。

二、项目框架

1.index

1)index.js

var api = require('../../utils/api.js')var app = getApp()Page({ data: { lists: [ { 'id': '1', 'image': '/img/1.jpg', 'title': '太行领秀| 长治·上党郡 【深度了解长治红色旅游景点】', 'num':'304', 'state':'进行中', 'time': '4月21日 17:59', 'address': '长治市·潞州区' }, { 'id': '2', 'image': '/img/2.jpg', 'title': '长治·武乡·革命圣地', 'num':'380', 'state':'已结束', 'time': '4月15日 17:39', 'address': '长治市·武乡县' }, { 'id': '3', 'image': '/img/3.jpg', 'title': '沁源之美·灵空山', 'num':'500', 'state':'进行中', 'time': '2月04日 17:31', 'address': '长治市·沁源县' }, { 'id': '4', 'image': '/img/4.jpg', 'title': '革命太行邀您“与世界对话”', 'num':'150', 'state':'进行中', 'time': '5月09日 17:21', 'address': '长治市·潞州区' }, { 'id': '5', 'image': '/img/5.jpg', 'title': '红色太行 · 太行山革命区', 'num':'217', 'state':'进行中', 'time': '10月09日 16:59', 'address': '长治市·潞州区' } ], list: [ { 'id': '1', 'image': '/img/1.jpg', 'title': '太行领秀| 长治·上党郡 【深度了解长治红色旅游景点】', 'num':'304', 'state':'进行中', 'time': '10月09日 17:59', 'address': '长治市·潞州区' }, { 'id': '2', 'image': '/img/2.jpg', 'title': '长治·武乡·革命圣地', 'num':'380', 'state':'已结束', 'time': '10月09日 17:39', 'address': '长治市·武乡县' }, { 'id': '3', 'image': '/img/3.jpg', 'title': '沁源之美·灵空山', 'num':'500', 'state':'进行中', 'time': '10月09日 17:31', 'address': '长治市·沁源县' }, { 'id': '4', 'image': '/img/4.jpg', 'title': '革命太行邀您“与世界对话”', 'num':'150', 'state':'已结束', 'time': '10月09日 17:21', 'address': '长治市·潞州区' }, { 'id': '5', 'image': '/img/5.jpg', 'title': '红色太行 · 太行山革命区', 'num':'217', 'state':'进行中', 'time': '10月09日 16:59', 'address': '长治市·潞州区' } ], 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({ lists: 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{ height: 100%; background-color: #efeff4;}scroll-view{ height: 100%;}.swiper{ top: 0px; width: 100%; height: 240px; }.swiper swiper{ height: 240px;}.slide-image{ width: 100%;}.mobi_title{ font-size: 15px; color: #777; line-height: 110%; font-weight: normal; width: 100%; padding: 10px; background-color: #f3f3f3; position: relative;}.mobi_icon{ padding: 0px 1.5px; border-radius: 1.5px; background-color: #ff7777; position: relative; margin-right: 5px;}/*list*/.list{ overflow: hidden; width: 100%; padding: 0 20px 0 0; border-top: 1px solid #eeeeee; background-color: #fff; margin-bottom: 15px;}.list-img{ position: relative; float: left; width: 120px;}.list-img .video-img{ width: 120px; height: 120px;}.list-detail{ position: absolute; margin-top: 15px; margin-left: 135px; margin-right: 10px;}.list-title text{ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 17px; color: #333; font-weight: bold; line-height: 120%;}.list-tag view.state{ display: block; font-size: 11px; color: #81aaf7; width: 50px; padding: 2px; border: 1px solid #93b9ff; border-radius: 2px; text-align: center; margin-top: 10px; float: left;}.list-tag .join{ font-size: 13px; line-height: 120%; color: #bbb; position: absolute; display: inline; margin: 10px 0 0 20px;}.list-tag .list-num{ font-size: 16px; color: #ff6666;}.list-info{ font-size: 13px; color: #bbb; line-height: 110%; font-weight: normal; margin-top: 40px;}-

2.app.json

{ "pages": [ "pages/index/index", "pages/setting/setting", "pages/login/login", "pages/please/please", "pages/Calendar/Calendar", "pages/discovery/discovery" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "太行精灵", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#a0a0a0", "selectedColor": "#ec5c30", "backgroundColor": "#f2f2f2", "borderStyle": "white", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "img/shouye.png", "selectedIconPath": "img/shouye1.png" }, { "pagePath": "pages/setting/setting", "text": "我的", "iconPath": "img/me.png", "selectedIconPath": "img/me1.png" } ] }, "debug": true, "sitemapLocation": "sitemap.json"}-

以上代码仅供参考，可以参照以下文档 链接:微信小程序官方文档小程序框架

三、项目上线

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。