三周学会小程序第二讲:客户端代码准备和功能详解

阅读文本大概需要 8 分钟。

通过上一讲大家已经申请了小程序了,这一讲我们主要讲解三部分,小程序开发工具使用,客户端代码准备,和基础的客户端讲解,并且运行第一预览版本。

本文不会带你从零搭建一个小程序,而是直接提供一个可预览版本。总结小编自己的编程经历,如果让你从基本类型,控制语句,for循环开始学 JAVA,那么可能几个月以后你才能真正动手做项目,所以我们按照“拿来主义”,直接拿来就读,读懂就改,改完就上线。不过你不用担心这样学习的不彻底,因为开发过程中你已经融会贯通了。

代码准备

想必大家都用过Github吧,小编把每期的源码直接开源到了 Github,地址

https://github.com/codedrinker/jiuask

并且为中途加入的小伙伴考虑,源码会按照每一章节打一个 Tag,所以本期的 Tag 是 V2。你可以选择 fork 代码到你自己的 Github 仓库,然后再克隆到本地。代码准备好我们就进行下一步下载工具运行开发了。

开发工具使用

首先介绍一下小程序官网文档地址

https://developers.weixin.qq.com/miniprogram/dev/index.html

这个你要存一个书签,因为后面可能一直用的到。他包括简要教程、框架、组件、API和工具,对了还有一个论坛,遇到一些标签,API的用法这里来这里查询,不过你在开发过程中遇到的问题,可以直接在小编创建的群里讨论,加群方式见文末。

现在我们下载开发工具,因为小程序开发是微信团队自己开发的引擎,所以需要使用它们自己的工具。下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载完成以后进行安装,安装以后按照如下步骤导入源码并运行。

首先我们需要扫码登录,扫码的微信是你注册小程序的微信,你也可以通过开发者登录(通过公众平台->用户身份->编辑添加开发者)。

其次我们需要选择小程序选项,另一个是公众号开发。

最后我们导入源码,项目目录选择我们刚才克隆好的源码,会自动的关联一个 AppID,这个ID 是我的小程序的,你需要去上一节你注册好的账号下面寻找,公众平台->设置->开发设置->AppID获取自己的小程序ID并填写到此处,最后修改名称为你的名称,点击确定即可。

导入成功以后你就看到了如下界面。

我们按照下图简单讲解一下使用,还是老的原则,我们就讲马上可能用到的功能。

1,模拟器,打开左边的实时预览小程序的界面。

2,编辑器,打开右边编写代码的界面。

3,调试器,默认不打开,相当于 Chrome 的控制台。因为本身微信小程序的代码源于前端,所以他的调试方式基本和 Web 的调试方式一样。

4,编译,代码有修改以后点击一下会保存编译,或者你直接用 CTRL+S 保存,也会自动编译,同时更新左边的模拟器。

5,预览,编写告一段落以后,想自己在手机上面看下,点击这个按钮,扫码查看。

6,模拟器视图。

7,编辑器视图。

这时候你可以点击预览,然后通过手机扫码试一下,就可以看到自己的第一个小程序喽。下面我们把目光回到编辑器。

项目结构

如图,小编搭建了一个基础的小程序架子:

images,存放一些图片资源,目前就放了一个Logo。

pages,是小程序所有的功能页面,目前只有一个首页,另外pages是一个顶级目录,如果有其他的模块需要区分不同的子目录,这个具体我们后面开发过程中你就会理解。

pages/question, 每一个页面目录都有四个文件,js是用于逻辑控制,json是一些基础的配置,wxml可以直接理解为html页面,用于呈现页面,而wxss是我们熟知的 css文件,一个目录下面相同前缀的会自动关联到一起,所以这里我们全部命名为index前缀。

.gitignore,Git的忽略文件。

app.js,是项目总的逻辑入库文件,比如我们想打开APP的时候做一些数据的初始化,都在这个文件,后面我们会详细讲解。

app.json,是项目整体配置文件,里面会包括小程序包含页面的配置,小程序名称,背景颜色,标题颜色等基础配置。

app.wxss,是项目的整体样式文件,一些通用的样式代码可以放在这里。

project.config.json,这里就是一些基本的配置,小程序库的版本,包括我们刚才填写的AppID都是在这里配置。

首页讲解

下面我们回到我们最关心的首页布局。

如图,其实布局起来还是比较简单的,我们只要想好自己写成什么样子就可以。小编的布局比较简单。

view 你可以直接理解成为 div,页面的基础布局元素,同时他也是块级元素。

如图可以看出,小编通过 view 把首页分成了上中下三个部分,简介包括一个 image(img)标签和一个text(span),登录是一个 button标签最后的社区规则是一个 view标签。为了美观小编简单的调整了一下样式,当然 css的语法和基础的 web的语法是一样的,我们在 wxml 文件的标签里面定义 class,然后再 wxss里面实现这个样式就可以,如果你有CSS 基础应该一看就懂,如果你不了解基础的 HTML,CSS语法,请恶补一下。或者直接切换wxml和wxss文件,对照一下就明白了。

作业

为了让你更简单的上手,小编自己给了你框架,但是你需要学会怎么修改。所以这一节的作业是:

1,修改首页左边的 LOGO 为你的LOGO。

2,修改描述为你的描述。

3,修改社区规则为你的规则。

4,修改主色调为你的颜色,提示一下颜色的设置有三个文件 app.wxss,app.json,pages/question/index.wxss。

我是浪漫的分割线

问答

如果您对本系列文章有兴趣,欢迎置顶本订阅号,第一时间获取更新。

如果有任何问题,欢迎留言,小编很热衷和大家一起讨论技术问题。

-END-

原文发布于微信公众号 - Web项目聚集地(web_resource)

原文发表时间:2018-11-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

AngularJS的模板和数据绑定详解

Angular应用中的模板只是一些HTML片段而已,我们可以从服务器上加载,或者在标签中定义,处理方式与所有其他静态资源相同。如果你需要UI组件,你可以在模板中...

21870
来自专栏性能与架构

微信小程序入门示例

下面做一个非常简单的小程序(列出新闻列表,点击标题后进入详细页面)用来体会小程序的开发方式 ? 共有两个页面,一个是列表页,一个是详细页 通过这个示例,我们可以...

509140
来自专栏小尘哥的专栏

前后端分离Nuxt.js解决SEO问题

背景:由于后端程序猿通常对CSS 、JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样...

51740
来自专栏极客编程

打包利器webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

10820
来自专栏web前端-

初始vue

     vue是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,...

11230
来自专栏Jack-Cui

Jetson TX1开发笔记(二):TX1开发前必做的几件事

嵌入式平台: Jeston TX1     在上篇博客中,博主已经使用Jetpack3.0为Jetson TX1刷了最新的系统。但是,在开发前,个人感觉有几个...

36660
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Fail2Ban保护WordPress

WordPress是一个非常强大的内容管理系统(CMS),是免费和开源的。因为任何人都可以发表评论,创建一个帐户,并在WordPress上发帖,许多恶意行为者已...

18100
来自专栏君赏技术博客

第一次和你见面,我就深深的爱上你-Xcode Bot

最近研究起了 APP 的自动化测试,发现了 Xcode Bot自动化打包测试发布的功能,就开始研究起来。

19710
来自专栏Web 开发

ubuntu学习手札——中文设置,源设置等等最基本的

3. 对于类似“哪个源更快”这样的问题,并没有一个标准答案。每个人的网络状况有不同,不同网站的下载速度对会不同。更改完设置之后,在Software Sour...

9410
来自专栏河湾欢儿的专栏

客户端和浏览器端交互模型

26410

扫码关注云+社区

领取腾讯云代金券