系统设计与分析lesson5-关于微信小程序开发工具的学习

原创 2018年04月15日 22:14:04

前言

首先微信小程序就是运行在微信上的小的App,开发过程类似于Web APP的开发。然后微信小程序时下非常火热,个人认为主要有两方面原因:1.微信本身对小程序非常重视,从微信置顶了小程序功能就可以看出。2.微信这个平台非常具有传播力度,微信支付的成功就是一个很典型的例子。

准备工作

1.注册小程序账号
https://mp.weixin.qq.com/wxopen/waregister?action=step1

2.安装小程序开发工具。
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=2018412

3.登录威信公众号网站查看自己的AppID。
https://mp.weixin.qq.com/
这里写图片描述

小程序的HELLO WORLD

1.打开并登录小程序开发工具,可以看到主界面大体分为三个部分,左边的模拟器,右上的编辑器和右下的调试器,这种开发界面有过web开发或者安卓app开发的都很熟悉。
这里写图片描述
2.然后简单看一下一个微信小程序的文件组成结构。
这里写图片描述
我们可以看到这个项目里边生成了不同类型的文件:

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

接下来我们简单了解这4种文件的作用。

1.json文件

json文件简单说就是一种用来存储数据的文件,这里它主要用于保存小程序中页面配置、程序设置等数据。

2.WXML文件

有过UWP应用开发的或者安卓开发的人其实对XML会很熟悉,而WXML其实就是XML差不多的文件,前面加个W类似于加个微信的标签,然后这一类文件通常是用来设置程序UI界面的。

3.WXSS文件

同上,WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。
这一类文件是用来对UI界面的具体参数及形式做补充设置的。

4.JS文件

js文件大家也很熟悉。就是规定程序和用户交互的逻辑功能。
比如点击一个按钮具体会执行哪些操作都在js文件里面声明。

开发模式

微信小程序的开发模式跟安卓app开发其实大体相同,不过由于本人之前更多的UWP应用开发相关的经验,在接触小程序的时候会更多的参照UWP开发去理解。

小程序开发和UWP相似的在于两者总体上都是 视图+逻辑 这样一种MVVM的开发框架,个人对MVVM的开发框架是非常喜欢的,MVVM具有低耦合、独立开放、界面易测试等优点,而且开发过程中能实时看到程序一点一滴的改变,有利于激发开发者的创造热情。

微信小程序开发教程(破解版IDE 无内测资格也可使用)

破解版IDE下载地址,以及使用说明: http://download.csdn.net/download/aa841538513/9637813 http://download.csdn.net/d...
  • aa841538513
  • aa841538513
  • 2016年09月23日 11:35
  • 4968

微信小程序 开发 微信开发者工具 快捷键

微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能...
  • qq_31383345
  • qq_31383345
  • 2016年10月13日 09:54
  • 11798

微信小程序开发<一>工具安装及项目结构介绍

一、微信小程序介绍1、什么是微信小程序传说中的微信“应用号”终于要来了,但它的正式名称很有可能是“微信小程序”。那么什么是小程序呢?小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的...
  • jingsi1991
  • jingsi1991
  • 2016年10月15日 16:10
  • 1682

微信小程序demo、开发工具下载地址

写在最前面 17年1月小程序出世,可以说是出来之前就万众瞩目,年中几乎爆炸,到了年底的时候,可以这样子说在北上广深以及新一线城市里随便一家奶茶店都有了小程序,一线以及二线、三线、乃至我自己的家乡一个小...
  • StevenTang957
  • StevenTang957
  • 2018年02月23日 15:22
  • 62

微信小程序开发者工具初体验及实现技术初探

微信小程序是当前的热点,市面上已经有很多微信小程序开发相关的文章,今天晚上抽了点时间折腾了微信小程序,并顺便看看了下微信小程序开发者工具的实现,是使用Node.js开发的,UI是基于NW.js框架开发...
  • offbye
  • offbye
  • 2017年01月10日 23:10
  • 1655

微信小程序开发工具 常用快捷键

格式调整   Ctrl+S:保存文件   Ctrl+[, Ctrl+]:代码行缩进   Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块   Ctrl+C Ctrl+V:复...
  • cc20032706
  • cc20032706
  • 2016年12月12日 14:05
  • 2860

微信小程序(应用号)开发工具+破解+Demo+教程

一、介绍 9月21号,传言已久的微信应用号正式以“微信公众号平台小程序”的名义发布,依然采取了内测制度,目前只有少部分开发者可使用。“微信之父”小龙哥 哥在朋友圈介绍,这种小程序是一种不需要下载安装即...
  • ATangSir
  • ATangSir
  • 2016年09月23日 23:29
  • 7172

微信小程序在开发工具上可以编译但是手机预览请求不到数据

言简意赅,在拿了人家开源项目来跑的时候,有时会发现小程序开发工具自带的模拟器不能请求到数据,这时候比较简单,直接在工具上的导航栏找到“工具---&gt;项目详情”,然后如图红框勾上然后再编译就...
  • Ycocol
  • Ycocol
  • 2018年02月09日 10:07
  • 484

微信小程序开发需要注意的30个坑

1、小程序名称可以由中文、数字、英文。长度在3-20个字符之间,一个中文字等于2个字符。 2、小程序名称不得与公众平台已有的订阅号、服务号重复。如提示重名,请更换名称进行设置。 3、小程序...
  • cawebs
  • cawebs
  • 2017年02月24日 14:38
  • 2405

微信小程序开发环境搭建

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即...
  • xiehuimx
  • xiehuimx
  • 2016年09月23日 00:16
  • 57453
收藏助手
不良信息举报
您举报文章:系统设计与分析lesson5-关于微信小程序开发工具的学习
举报原因:
原因补充:

(最多只允许输入30个字)