angular 微信小程序（制作微信小程序需要掌握什么知识）

本文目录

• 制作微信小程序需要掌握什么知识
• html和小程序的区别
• 微信小程序开发系列 （四） ：微信小程序的页面跳转路由设计
• 微信小程序开发需要什么技能跟技术
• 怎么把AngularJS开发的页面迁移到微信小程序
• 如果会前端开发，去开发微信小程序难吗，小程序是基于网页的实现吗
• 写给Android开发者看的『微信小程序和Android开发的对比』

制作微信小程序需要掌握什么知识

1.想学微信小程序,前提要具备哪些知识
1. 前期阶段：建议从HTML-》 CSS -》 JAVASCRIPT-》JQUERY 开始，0基础均可学习。

2. 中期阶段：建议了解一些知识，精通最好。比如一些基础框架和知识 ：bootstrap jssdk ajax json 协议等，在这里就可以开始学习小程序了，里面语法相似angular ，差别也多。

3. 后期进阶：react webpack less websoket 各种插件 ，面向对象， 协议 angular/vue/node，建议精通一种或者2种 ， 前端和服务端交互过程，等等 。其实这里中期就可以和小程序一起学习了，如果你能力很强，建议一起学习，最后面可以学习 服务端技术，底层 ，架构等。

4. 欢迎修正，探讨技术。
2.做一个微信小程序需要什么
1、为小程序开发的产品定位有的用户开发小程序的目的只是为了服务于广大消费者，但是有的商家却是为了从中获取收益，不同的目的自然产品的定位也不同，大家需要根据自己的产品和行业找准自己产品的定位，找准了定位开发起来也能事半功倍。

2、做好线下推广小程序需要线下的推广，只有通过线下的推广才能够让大家知晓这个小程序的存在，大家可以为小程序定位，基于地理位置让附近的用户看到，通过“附近小程序”的功能让大家能够搜索到，也可以使用比较传统的方法美也就是发传单和举办一些活动的方式，让大家可以通过扫描二维码进入，并且成为你的小程序粉丝。3、寻找第三方开发公司合作虽然小程序开发的费用没有APP费用高，它的构建系统也没有APP复杂，但是一般情况下公司和商户都还不具备小程序开发的能力，所以大家就需要寻找专业的第三方开发公司合作，通过他们专业的技能来为自己打造一个专属的小程序，并且找第三方开发公司合作比自己组建开发团队的费用更低。

4、开发过程中注重用户体验大家可能在使用一款小程序的时候会发现，现在小程序暂时还没有信息发送的功能，但是却已经有了客服等交互功能，如果大家想要打造一个更好的小程序，在开发的过程中就一定要注重用户的体验度，让用户在使用小程序的过程中真正感受到小程序区别于原生App的方便快捷。5、从公众号积累的影响力入手大多数企业在开发小程序之前的都有了自己的公众号，我们可以利用公众号进行运营来推广小程序，再用小程序获取用户进入到订阅号展开二次转化，这样一来为企业的公众号积累了粉丝，二来也为大家所开发的小程序实现了变现的目的，同时做好小程序的服务还能够确保源源不断的流量，获得更多的用户-------------------------------。
3.学习微信小程序开发需要具备哪些基础知识
前期阶段：建议从HTML-》 CSS -》 JAVASCRIPT-》JQUERY 开始，0基础均可学习。

中期阶段：建议了解一些知识，精通最好。比如一些基础框架和知识 ：bootstrap jssdk ajax json 协议等，在这里就可以开始学习小程序了，里面语法相似angular ，差别也多。

后期进阶：react webpack less websoket 各种插件 ，面向对象， 协议 angular/vue/node，建议精通一种或者2种 ， 前端和服务端交互过程，等等 。其实这里中期就可以和小程序一起学习了，如果你能力很强，建议一起学习，最后面可以学习 服务端技术，底层 ，架构等。

欢迎修正，探讨技术。
4.弄微信小程序需要准备什么工作
小程序的体验和使用效果毋庸置疑的，我说说开发小程序步骤：

注册小程序

需要一个营业执照，个体户执照也可以。

如果有公众号，可以直接复用公众号资料，申请小程序。这个方便快捷。

如果没有公众号点着里：微信公众平台.

等待小程序注册审核，一天就可以通过。

完善小程序基本资料，例如logo 名称 行业等。

开发小程序

早期开发小程序比较麻烦，需要上传代码，各种各样的配置，太麻烦了。现在用授权第三方服务商方式，容易很多。第三方小程序服务商：做小程序全面，也同时提供微商城，和微商城数据都是打通的，订单 会员 等通用的，制作价格3000~8000不等，比较划算。

运行小程序

可以把小程序放到附近小程序里面，或是发送小程序码，以及分享小程序给好友和群。小程序只是一种载体，具体怎么运营还需要很多心思的，请看运营秘籍，会启发你很多思路。
5.开发小程序需要掌握哪些知识点
开发小程序需要掌握以下几方面：

1、小程序的功能是否齐全

小程序是一种工具，如果这个工具少一些功能，那这个工具就是废的，用不了。小程序一般分为餐饮小程序、电商小程序、企业展示小程序、游戏 小程序，每个种类的小程序都有一些特定的功能，比如餐饮小程序需要点餐、排好、预约、支付、外卖等功能，你开发的小程序里是否这些功能都 有。所以在你做小程序之前，你需要想清楚自己的小程序是用来做什么的？需要哪些功能？

2、小程序的用户体验如何

包括页面设计十分美观、响应速度十分快、功能既简洁又安全，还有一些小程序，加载半天图片出不来，这样的用户体 验肯定好不了。

3、性价比是否高

营销圈最大的问题在于，产品和价格不标准化，同样的小程序，有的公司报价￥1000，有的报价￥10000，企业根本弄不清楚1000元和10000元的小 程序差异在哪里。选择贵的觉得不划算，选择便宜的又怕小程序不好用，犹豫不决。

html和小程序的区别

第一条、运行环境的不同

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器。

第二条、开发成本的不同

抛去开发工具（vscode、sublimtext、Atom等）不谈，大到前端框架（Angular、react、vue、backbone等）、模块管理工具（Webpack、Browserify等）、任务管理工具（Grunt、Gulp等），小到UI库选择、接口调用工具（ajax、FetchApi等）、浏览器兼容性等都要我们一一考略，再不济用jqery插件写H5，也要在开发过程中去寻找合适的jquery插件来配合项目。

第三条、获取系统级权限的不同

微信小程序相对于HTML5web应用能获得更多的系统权限，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接，也就是官方宣称的拥有NativeApp的流畅性能，而这一点恰巧是HTML5web应用经常被诟病的地方，这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

第四条、应用在生产环境的运行流畅度

最容易区分小程序与H5的一点，打开H5，实际上是打开一个网页，而网页需要在浏览器中渲染，面对复杂的业务逻辑或者丰富的页面交互时页面会卡顿。

而微信小程序，直接在微信上运行，省去了通过浏览器渲染的步骤，因此，在微信中使用小程序，才会比H5流畅很多。除了首次打开需要几秒的加载时间外，小程序各个页面的切换、跳转等体验已经媲美原生App，非常顺畅。

微信小程序开发系列 （四） ：微信小程序的页面跳转路由设计

笔者由于工作需要，曾经参加过一个微信小程序同 SAP 系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。

本教程前面三篇文章：

通过本系列前面三篇文章的介绍，大家对微信小程序的视图和控制器，微信调试器的用法，以及如何消费微信平台提供的 Public API，已经有了一个最基本的认识了。在这个基础上，本文让我们进一步学习微信小程序的页面跳转路由设计。

这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图，然后实现从第一个视图到第二个视图的跳转。
首先开发第二个视图：

做过 Angular 开发的朋友们对上面的视图设计一定不会陌生。这个视图的数据源由模型 logs 提供，是一个列表结果，列表每个元素的数据源是模型 logs 里的一条记录，用 log 代表。

为了让 log 看起来显示更整齐，在 log 内容之前，显示每条 log 的索引。因为 log 的索引从 0 开始，所以用 {{index + 1}} 在索引前加一，这样显示的索引更符合普通人的阅读习惯。

这个视图的控制器：

控制器 logs.js 的实现：

在控制器里调用 Page 构造函数，给当前控制器指定名为 logs 的数据模型。
这个数据模型的值填充，通过微信框架提供的 API wx.getStorageSync 来获取。

wx.getStorageSync 的含义在微信小程序 官网 上有定义：从本地缓存中同步获取指定 key 对应的内容。

第二个视图的 UI 和控制器都开发完毕，剩下的事情就是在第一个视图里定义一个触发点，让它能触发到第二个视图的跳转。
我在第一个视图上通过属性 bindtap 绑定了一个点击函数 bindViewTap :

bindViewTap 在第一个控制器 index.js 里的实现：

跳转还是通过微信小程序提供的 API wx.navigateTo :

保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。

学习了微信小程序页面路由跳转之后，我们来进行一个实际的需求开发。

效果：我在手机上打开微信小程序，自动显示出我当前所在的地理位置：

具体步骤：

ReservationService.getGeocode 的实现：

看下面一个使用高德地图 API 将经纬度转换成文字描述的地址的例子，使用 postman 发送请求：

API 响应：

假设我用 vue 开发了一个 web 应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试。

假设我的 web 应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在 web 开发者工具里,将开发者本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意操作完成绑定。

接下来, 把要调试的 web 应用的 url 放到微信开发者工具地址栏里，回车之后，微信开发者工具就会弹出一个询问窗口，点击 Allow 之后，就可以在微信开发者工具提供的类似 Chrome 开发者工具调试器一样的界面里进行单步调试了。

这个粘贴到地址栏的 url 很有讲究。

***隐藏网址***

其中 appid= 后面的值，是从微信公众号控制台里拷贝出来的 appid ：

redirect_uri, 即为我们开发的 web 应用，部署到服务器之后生成的 url，需要经过 url encode 处理：

***隐藏网址***
这个 url 准备好之后，将其粘贴到微信开发者工具地址栏里，回车，即可看到一个对话窗口，要求获得我们公开信息的许可：

点击 Allow 之后，就可以像使用 Chrome 开发者工具的调试器一样，在微信开发者工具里进行单步调试了：

本文首先介绍了微信小程序多页面内的路由跳转设计，接着通过获得手机当前经纬度并转换成地址的需求实现，进一步深入了解了微信小程序如何消费微信平台提供 Public API 的方法。

本教程前面三篇文章：

微信小程序开发需要什么技能跟技术

微信小程序开发需要掌握的技术如下：
1、WXML语言，上面说了，类似于 Html语言
WXML(WeiXin Markup
Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
2、要学习Javascrip作为 后台代码编写语言
3、要学习PHP作为 服务器代码编写语言 (你也可以选择其他语言)
4、要学习WXSS(为了适应广大的前端开发者，WXSS 具有 CSS 大 部分特性, WXSS 对CSS 进行了扩充以及修改.)
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
与 CSS 相比，WXSS 扩展的特性有：尺寸单位和样式导入
5、学习微信小程序的一系列组件的使用
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发
6、学习微信特有的API
框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等
wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
7、要学习WXS
WXS(WeiXin Script)是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构，这个语言类似于 Javascript。

怎么把AngularJS开发的页面迁移到微信小程序

把AngularJS开发的页面迁移到微信小程序
目录迁移
1、每个子模块页面换成Pages目录下的一个子目录，目录命名就是原子模块名。
2、原来的通用css、image、fonts等静态资源统一移到resource目录下，需要使用时，对于css样式文件，在对应子模块的wxss文件首部通过import命令引入；
替换规则
1、div需统一转换成View；
2、ng-show统一转换为wx:if；
3、ng-click统一转换为bindtap；
4、ng-repeat统一用wx:for替换；
5、ng-class中的样式选择性绑定可以直接把条件绑定语句嵌入class属性；
js代码
模块级代码迁移： 可将模块级作用域使用的通用逻辑搬到app.js中，通过app对象来引用；或者定义一个util模块，来做动态引入； 对于原生与h5交互时用到的自定义事件，需要根据具体场景做处理。
子模块级代码迁移：
可将Angular子模块代码直接迁移到小程序对应Page对象中，当然，对于Angular特定语法的$***对象（例如$scope、$rootscope）的操作，需要做全局替换，替换原则是：
1、$scope:与Page对象同生命周期内的$scope，可以直接替换成this；而对于非同一生命周期的（最常见的即是各种callback回调函数），需要将Page对象在方法外做引用保存（例如var self=this），然后在回调函数中使用。
2、$rootScope:推荐放入app对象中引用，或者自定义通用模块，然后动态引入；
3、数据模型：各页面中建立的数据模型，直接放入***.json文件中，如果涉及Angular特定语法的操作，可参考上述两点的做法进行替换；
4、jsonp请求：将jsonp请求统一替换成wx.request请求，只是原来的链式写法要换成参数型写法；
5、子模块间的页面跳转，$state.go统一替换成wx.navigateTo或wx.navigateBack；

如果会前端开发，去开发微信小程序难吗，小程序是基于网页的实现吗

不难。
微信小程序类似于web开发，主要区别在于小程序有自己的一套框架，看起来很像angular，实际上也有点区别。
小程序有部分使用原生组件渲染，如canvas最终会渲染于原生组件上。小程序可以有更全面的原生api接口调用，可以实现类似于微信原生app的功能。
但对于开发者来说，只要会html、css和js，开发小程序都不难，甚至难度可能比vue,angular还低。

写给Android开发者看的『微信小程序和Android开发的对比』

微信小程序近期可谓是动作频出，仅最近新增的能力就有：

种种迹象表明，微信对小程序的期望值是很大，所以在它推出的几个月效果没到达预期的情况下，之前的很多『克制』也就逐渐变成『放肆』了 —— 不过不管小程序以后的发展到底怎样，对我们开发者来发，多了解一些总是没有坏处的。

他山之石，可以攻玉。
对于是技术人来说，多了解一些不同的技术、不同的开发模式、不同的架构思想，提高技术『广度』，对于自己的成长是十分必要的。
所以，本文就是从一个 Android 开发者的角度，从项目工程方便切入，来分析一下『微信小程序』跟『Android App』开发上的一些异同。
『微信小程序』开发是一个相对较新的技术，希望通过本文，能让你对它多一些了解。

因为内容是从Android开发的角度来谈的，所以我假设你已经对 Android 开发比较熟悉了。并且对微信小程序的开发也比较感兴趣，如果要是再能有些 javascript、css 的基础的话那就更好了！

Android 开发我们已经比较熟悉——

作为对比，进行微信小程序开发所用的语言是这些——

wxml (WeiXin Markup Language) 基本约等于是 xml。微信之所以没有直接使用 xml ，可能是为了以后扩展方便一些（野心很大）。
同理， wxss (WeiXin Style Sheets) 基本约等于是 css。也是微信扩展了一些功能，比如统一的尺寸单位 rpx 。

对于 Android 来说，对于页面的描述基本上在 xml 中定义的，比如：

这是一个简单的典型的示例，这个文件就是描述了两部分内容：

some.wxss:

很明显可以看出：wxml 是负责了 页面结构 的展示；而 wxss 则负责了对 页面样式 的定义。
这种把结构和样式分离的做法，其实是延续了网页开发中的习惯（html + css）。
这样做的好处起码有两个：

——看起来还是挺简单的结构:

这三个文件用以描述小程序 app 相关的内容，他们的命名是固定这样的，位置也固定是在根目录下。

app.js 基本相当于 Android 中的 Application 类，文件中主要是有一个 App() 函数，来进行小程序的初始化操作。

app.json 的作用跟 Android 中的 AndroidMainifest.xml 文件很相似 —— 都是静态化的配置文件。

app.wxss 定义全局的样式 —— 其定义的样式会作用于每个页面。比如在 app.wxss 中加入：

就可以给所有的 text 控件添加 5px 的 padding 。
当然，页面本身的 xxPage.wxss 可以定义局部样式来覆盖全局样式。

根目录下的 utils 文件夹中有一个 util.js 文件，这个故名思意，是类似于 Java 中的一些工具类的存在。
utils 文件夹其实是一个非必须的结构，而它之所以出现在官方的 HelloWorld 工程中，是作为一个代表，表明了开发者在这里是可以自定义新的文件夹和结构的。微信小程序作为一个使用 js 来开发的平台，是可以使用许多第三方的 js 库的，对于这些第三方库，以及其他的图片资源等，都可以放到自定义的文件夹中。

pages 文件夹下包含两个子目录：index 和 logs ，两个目录的结构都是基本一样的，都是包含四个相同主名称的文件： xx.js、xx.wxml、xx.json、xx.wxss 这几个文件。
这样的一个典型结构表明它是一个小程序的页面，四个文件的作用分别是：

在视图的动态显示上，微信小程序使用了 数据绑定（data-binding） 的方式。
如果你之前使用过 AngularJS 或者 Vue.js 等这些流行的 js 框架，那么你肯定对 数据绑定 并不陌生。它是一种把一个控件的属性绑定到某个数据对象（view-model）的属性的方法，这样在改变数据对象属性的时候，所对应的控件属性也就会相应变化 —— 在开发中，这种方式会使得对 View 层的显示控制变得十分简单、自然。
基于此，软件工程的流行架构方式也在之前的 MVC 、 MVP 之外，又多了一个 —— MVVM（Model-View-ViewModel） 。
***隐藏网址***
—— 单从这一点上看，微信小程序的开发模式是比原生 Andorid 要『先进』一些的~ :smirking_face:

小程序虽然是和前端 H5 页面一样是用 js 来开发，但是由于它最终运行的平台不再是浏览器，而是和 App 的表现几无二致，所以页面的生命周期也是和 App 差不多的。

一个小程序页面的典型生命周期如下：

对比一下 Android 的 Activity 生命周期 ：

微信小程序的页面生命周期稍微简单一些，但主要的思想跟 Activity 生命周期基本是一致的。

小程序的官方 IDE 是微信自己出品 微信Web开发者工具 ，它内置了一个小程序的运行环境，本质上是基于 Chrome 内核的一个浏览器框架，算是一个模拟器了。
——它虽然跟 Android 的各种高大上的模拟器相比起来略显简陋，但是基本该有的功能也基本都有（断点、Log、网络监控等），而且由于是基于浏览器内核的页面 DOM 解析，所以运行的速度也是像浏览器打开网页一样流畅，不会像 Android 模拟器那样对系统资源要求很高。
另外，在绑定了开发者账号之后，也可以用手机进行真机调试来调试小程序，所以也能在上线前用不同的机器来进行充分的兼容性测试。

总体来说，小程序作为一个新的形态，从开发的角度，它可以算作是一个【Native开发】和【H5开发】的结合，它吸收了原生开发和 H5 开发的优点。对于前端开发人员和原生开发人员来说，都可以在微信小程序中找到许多熟悉的东西。再细节的许多点这里就不在赘述了，大家如果有兴趣，可以自己上手去体验一下。

综上，自然也就有两种人特别适合去做小程序的开发——H5的前端开发人员，以及之前的 Android/iOS 原生 App 开发者。

微信小程序的开发总体来说是很简单的。
—— 对于前端开发者来说，了解一下原生 App 的一些相关思想即可，这些工作其实只要读一遍小程序的开发者指南基本就差不多了。
—— 而对于原生开发者来说，只要稍微补一下 js 的相关知识（html/css），也基本就差不多可以上手去做了。如果你之前恰好已经有过一些 js 的使用经验，那就不用多说了，花半个小时看一下小程序的文档，直接上！

关于作者 :
***隐藏网址***
***隐藏网址***
***隐藏网址***