一、小程序与普通网页开发的区别？

1.运行环境不同:网页运行在浏览器环境中，小程序运行在微信环境中。

2.API不同:由于运行环境的不同，所以小程序中无法调用dom或者BOM的API，但是小程序中可以调用微信环境提供的各种API，例如地理定位、扫码、支付。

3.开发模式不同:网页的开发模式是浏览器➕代码编辑器。小程序有自己的一套标准开发模式:首先申请小程序开发账号，其次安装小程序开发者工具，再次创建和配置小程序项目。

❶注册小程序开发账号:在微信公众平台，点击立即注册即可。以我为例:注册了 CSH测试号【FC198***】获取到AppID(小程序ID) ：wx5951e7987026c***

❷推荐下载和安装最新的稳定版的微信开发者工具。

❸设置外观和代理。建议将外观设置为浅色，字号18，行距12，将代理模式设为不使用任何代理。

二、新建程序项目开始开发

1.小程序项目的基本组成结构。7个文件

❶pages用来存放所有小程序的页面。

❷utils，普通的js文件，用来存放工具性质的模块，例如格式化时间的自定义模块。

❸app.js小程序项目的入口文件。通过调用APP()函数来启动整个小程序。

❹app.json小程序项目的全局配置文件。

❺app.wxss小程序项目的全局样式文件。

❻project.config.json项目的配置文件。

❼sitmap.json用来配置小程序及其页面是否允许被微信索引

2.每个页面有四个基本文件组成。

❶·js文件页面的脚本文件存放页面的数据，事件处理函数等。页面的js文件是页面的入口文件，通过调用page()函数来创建并运行页面。

❷·json文件，当前页面的配置文件，配置窗口的外观表现等。

❸·wxml文件页面模板结构文件

❹·wxss文件，当前页面的样式表文件。

3.JSON配置文件的作用:

它是一种数据格式，在实际开发中总是以配置文件的形式出现。小程序项目中有四种json配置文件

❶项目根目录app·json配置文件:是当前小程序的全局配置，包括了小程序的所有页面，路径，窗口，外观，界面表现，底部tab等。其中pages用来记录当前小程序所有页面的路径，window是全局定义小程序所有页面的背景色，文字颜色。style是全局定义小程序组件所使用的样式版本。sitmaplocation用来指明sitemap·json的位置。

❷项目根目录中的project.config.json配置文件:他是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如塞体中保存了变异相关的配置，project name中保存的是项目名称,appid保存的是小程序id

❸项目根目录中的sitemap·json配置文件。微信现开放小程序内搜索效果类似于PC网页中的seo。此文件用来配置小程序页面是否允许微信索引。注意:sitmap的索引提示是默认开启的，如需关闭可在小程序项目配置文件的setting中配置字段checkSiteMap 为false.

❹每个页面文件夹中的·json配置文件。小程序中的每一个页面都可以使用文件来对本页面的窗口外观进行配置，它会覆盖app.json的windows中相同的配置项。

三、宿主环境

程序运行所必须的依赖环境，安卓系统和iOS系统是两个不同的宿主环境，安卓版的微信APP是不能在iOS环境下运行的，所以安卓是安卓软件的速度环境，脱离了宿主环境的软件是没有任何意义的。

●手机微信是微信小程序的宿主环境

小程序宿主环境包括的内容:

1，通信模型

小程序中通信的主体是渲染层和逻辑层，其中xml模板和wxs样式工作在渲染层，js脚本在逻辑层。渲染层和逻辑层之间的通信➕逻辑层和第三方服务器之间的通信都由微信客户端进行转发。

2，运行机制

❶小程序启动的过程:把小程序的代码包下载到本地、解析app·json全局配置文件、执行app.json小程序入口文件调用app () 创建小程序实例、渲染小程序首页、小程序启动完成

❷页面渲染的过程:加载解析页面的.json配置文件、加载页面的wxml模板和wxss样式、执行页面的js文件，调用Page() 创建页面实例、页面渲染完成。

3，组件

小程序中的组件也是由宿主环境提供的，可以基于组件快速搭建出漂亮的页面结构逐渐分为9大类，分别是

❶视图容器

01.常用的视图容器类组件:view(普通视图区域，类似于HTML中的div，是一个快捷元素，常用来实现页面的布局效果。) scroll-view (可滚动的视图区域，常用来实现滚动列表效果。) swiper和swiper-item(龙波图容器组件和龙波图item组件)

❷基础内容，

01.Text （文本组件类似于HTML中的span标签，是一个行内元素●Tax组件的属性selectable实现长按选中复制效果。)，rich text.（富文本组件，支持把HTML字符串渲染为xml结构●通过rich text组件的node属性节点把HTML字符串渲染为对应的url结构，如

nodes=＂
标题
＂

●其他常用组件有

button组件

按钮组件功能比HTML中的button按钮丰富，通过open-type属性可以调用微信提供的各种功能，如客服、转发、获取用户授权、获取用户信息等。Button组件有type，size ，plain属性

image组件

图片组件，组件默认宽度300px度约240px

navigator组件

页面导航组件类似于HTML中的a链接。

❸表单组件，❹导航组件，❺媒体组件，❻map地图组件❼canvas画布组件❽开放能力，❾无障碍访问。

4，API

小程序API3大分类。

01.事件监听API

●特点，on开头用来监听某些事件的触发。

●举例，wx.onWindowResize(function callback)监听窗口尺寸变化的事件

02.同步API

●特点1,以sync结尾的API都是同步API

●特点2，同步API的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

●举例，wx.setStorageSync('key','value')向本地存储中写入内容。

02.异步API

●特点，类似于Jquery中的$.aiax(option函数，需要通过success， fail ，complete接收调用的结果。

●举例，wx.request()发起网络数据请求通过success回调函数接收数据。

四、小程序的开发流程？

提出需求、设计、开发、体验、测试、发布。

• 数据绑定的基本原则：在data中定义数据，在wxml中使用数据

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！