序言

本专栏主要用于介绍个人微信小程序的开发，从一个已经构建好的小程序——"识图解字"来剖析广大开发者常见的各类问题，除此之外还会介绍后端开发，服务搭建部署等内容。希望能给广大开发者带来一些帮助，因为作者也是初入小程序开发，如文章中有描述错误的地方，欢迎指正。

第一个小程序

https://developers.weixin.qq.com/miniprogram/dev/
这个网址介绍了如何注册一个小程序账号的步骤。

在注册账号之后，下载并打开微信小程序开发工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

打开开发工具之后,填写APPID后勾选 "创建 QuickStart 项目" 就可以新建一个简单的小程序。其中的目录结构如下：

image.png

根目录中的 app.js, app.json, app.wxss 都是对基于整个小程序的配置。
app.js 主要包括小程序打开的执行逻辑和一些全局数据；
app.json 包含了所有小程序页面的路径，如果新建页面的话，需要在这个文件配置一下；
app.wxss 定义一些全局的格式；
project.config.json 里主要是项目开发的配置，包括界面颜色、编译配置等，目的在于项目在多个平台下开发时，环境保持一致。

在pages文件夹下是小程序的页面逻辑和展示代码部分，每个文件夹下都是一个单独的小程序页面，文件夹的名字对应页面的名称，需要在app.json中配置，每个文件夹一般包含 wxml, wxss, js 三类文件：
wxml 虽然名字和xml比较像，但是两者不是一个东西。类似网页开发中的html， wxml里面主要是网页的前端展示内容，其中较为常用的是<view></view> 类似网页中的<div></div>, 可以进行嵌套来完成复杂的展示。
wxss 类似网页开发中的css文件，主要定义wxml元素的css格式。
js 文件进行逻辑开发，数据传输，页面交互等部分。

知道上述内容就可以简单的完成一个hello word 小程序了：
index.wxml:

<!--index.wxml--> <view> <text>{{motto}}</text> </view> 

index.js:

Page({ data: { motto: 'Hello World', }, }) 

index.wcss为空

运行结果为:

image.png

欢迎大家使用我的小程序 识图解字：

gh_08e56b0090dd_344.jpg
本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/14448.html