手把手教你做小程序 从零开始的开发教程

当前市面上有关小程序开发的资料数量不少, 然而, 真正能够让人们自零开始、逐步骤依照其指引做出来的教程数量不多。在我的认知里, 小程序开发从本质上来讲并非那般玄妙高深, 只要你具备基本的网页知识, 再掌握一些框架规则, 方可做出一个可以运行起来的小程序。接下来, 我依据实际经验, 将这个过程剖析开来阐释明白。

开发前要准备什么工具和环境

动工做小程序之前, 必须要先准备好了所用的工具。首要先前往那个微信公众平台去注册一个小程序账号, 不管是个人还是企业状态均可进行注册, 注册完毕之后呢就会得到一个AppID, 这个东西在后续过程当中是会用到。接着要去下载微信开发者工具, 讲真这个工具可是集成了代码编辑、关于预览、调试以及上传等功能, 它可是开发过程里的主要力量。

若从环境角度而言, 你得去安装Node.js, 其版本只要在12以上便符合要求。要是你往昔有过编写前端代码的经历, 那么直接着手操作不会太过困难难受；要是你全然处于零基础的状态, 建议先耗上两天时间去学习一下JavaScript的基础语法以及CSS的布局知识, 并不需要达到精通的程度, 知晓变量、函数、数组、对象、选择器以及盒模型这类基础内容便已足够用了。

创建项目之际, 于开发者工具里边挑选小程序项目, 填入 AppID,选定一个模板, 接着便能够瞧见默认的页面。此时便可以开始修改代码了。小程序的核心文件为 app.json, 其用于配置页面路径、窗口样式、导航栏等全局参数。每个页面由四个文件构成: wxml、wxss、js、json, 它们分别掌管结构、样式、逻辑以及配置。

怎么做页面结构和数据交互

wxml来写页面结构, 它跟html类似, 不过有一些自身的标签, 像view替代div, text替代span, image替代img。每个页面能够绑定数据, 数据在js文件的data对象里定义。比如说, 你在data里写上一个“name: 张三”, 而后在wxml里通过“{{name}}”就能够将值渲染至页面上。

交互逻辑借助事件绑定得以达成, 比如说, 将一个bindtap事件绑定于按钮之上, 用户于js当中书写对应的事件处理函数, 如此便可处理诸如点击、输入以及滑动等之类的操作。数据更新运用this.setData方法, 该方法会自动引发视图更新, 无需手动去操作DOM。

若你打算从服务器获取数据, 那么便要运用微信所给予的网络请求接口wx.request。这一接口对GET以及POST予以支持, 其返回的数据呈现为JSON格式。在获取到数据之后, 同样借助setData将其渲染至页面之上。需要留意的是, 小程序默认情况下仅能请求https接口, 并且域名唯有在后台进行配置过后方可使用。

在页面跳转这块, 小程序给出了好些种导航途径, 像wx.navigateTo能跳转到全新页面且留存目前页面, wx.redirectTo会关闭当下页面而后跳转过去, wx.switchTab会转而跳至tabBar页面。页面之间传递参数能够于url后面添加参数, 目标页面在onLoad函数当中靠options取得参数值。