微信小程序开发教程

1进入微信公众平台，注册小程序账号，根据提示填写对应的信息即可。

2注册成功后进入首页，在小程序发布流程->小程序开发与管理->配置服务器中，点击“开发者设置”。

3会获得一个AppID，记录AppID，后面创建项目时会用到。

注意：如果要以非管理员微信号在手机上体验该小程序，那么我们还需要 *** 作“绑定开发者”。即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号

二、下载微信web开发者工具

为了帮助开发者简单和高效地开发，微信小程序推出了全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能。1下载页面：t=201715根据系统，选择对应的工具版本下载2工具包含编辑、调试和项目三个页卡：（1）编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本 *** 作（2）程序调试主要有三大功能区：模拟器、调试工具和小程序 *** 作区（3）项目页卡主要有三大功能：显示当前项目细节、提交预览和提交上传和项目配置

注意：启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的 *** 作都会基于这个微信帐号

三、编写小程序实例

1实例目录结构

2实例文件说明及源码一个小程序包含一个app（主体部分）和多个page（页面）（1）app是用来描述整体程序的，由三个文件组成，js后缀的是脚本文件，json后缀的文件是配置文件，wxss后缀的是样式表文件，必须放在项目的根目录。appjs是小程序的脚本代码（必须），可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的API。

appjson是对整个小程序的全局配置（必须），用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。微信小程序中的每一个页面的路径+页面名都需要写在appjson的pages中，且pages中的第一个页面是小程序的首页。

appwxss是整个小程序的公共样式表（非必须）。

（2）page是用来描述页面，一个页面由四个文件组成，这里以首页index为例，每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：indexjs、indexwxml、indexwxss、indexjson。js后缀的文件是脚本文件，json后缀的文件是配置文件，wxss后缀的是样式表文件，wxml后缀的文件是页面结构文件。indexjs是页面的脚本文件（必须），在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

indexwxml是页面结构文件（必须）。

indexwxss是页面样式表文件（非必须），当有页面样式表时，页面的样式表中的样式规则会层叠覆盖appwxss中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用appwxss中指定的样式规则。

indexjson是页面配置文件（非必须），当有页面的配置文件时，配置项在该页面会覆盖appjson的window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用appjson中的默认配置。这里无需指定。Tips：a为了方便开发者减少配置项，小程序规定描述页面的这四个文件必须具有相同的路径与文件名b小程序提供了丰富的API，可以根据自己需求选择

四、测试小程序实例

1打开微信web开发者工具，选择“本地小程序项目”。2填写小程序的AppID，项目名称，选择第三步写好的小程序实例文件夹，点击“添加项目”。3如果出现如下效果，那么恭喜你，你的第一个小程序项目已经编写成功了！点击左侧边栏“编辑”，还可以在右侧编辑窗口直接对代码进行修改，保存（CTRL+S）后刷新（F5）即可生效。

4如果想看小程序项目在手机上的效果，点击左侧边栏“项目”，点击“预览”生成二维码，打开微信扫描，就可以看到了。

制作的icon要在5050px以内（红色）， 小程序导航icon周围系统自留了空间（蓝色），此处的小房子icon是3439px

微信小程序，简称小程序，英文名MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

扩展资料：

安全管理

2018年12月27日,腾讯公司发布《腾讯隐私保护白皮书》,倡导“科技向善,数据有度”的隐私保护理念。在小程序的《服务条款》、《运营规范》中,分别设有“用户个人信息保护”和“用户隐私及数据规范”专章介绍。

微信小程序在产品功能设计上给用户更多控制力。在小程序的设置页,为用户提供了数据权限开关,一旦用户授权之后又关闭,小程序再次使用该用户数据时需要重新获得授权,为用户提供更方便的数据控制权。用户在小程序的资料页还可以看到隐私数据保护的提示以及投诉入口。

小程序在收集、获取用户数据上,小程序坚持“必要+合理”原则。必要是指只有在小程序的具体业务中,确实有场景需要获取用户数据的情况下,开发者才能去获取用户的同意授权；合理是指开发者获取数据的范围不应该超出具体场景所需要的数据范围。

例如一个提供外卖服务的小程序,可能需要获得电话、地址等数据,但没有必要获取性别、年龄等数据,否则平台会认为小程序收集用户数据的行为违反了“必要并且合理”的原则,会对这类小程序进行处理。

参考资料来源：百度百科-微信小程序

wxswitchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wxreLaunch：关闭所有页面，打开到应用内的某个页面。

wxreLaunch是可以跳转到tabBar页面的。它和wxswitchTab的区别就是：前者可以触发onLoad事件，而后者则不能触发。所以通过wxreLaunch跳转到tabBar的方式完美解决了不能刷新的问题。

在小程序项目中 我发现 wxswitchTab 跳转是触发onLoad事件  但是只会触发一次 如果我通过退出登录 是不会再次触发onLoad事件 的 而wxreLaunch是可以跳转到tabBar页面的 再次触发onLoad事件

一、Demo结构

先看效果图吧

结构是这样的：程序主界面包含两个 tab：主页和我的，主页又包含两个tab：最热和最新；我的也包含两个tab：**和音乐。 

关系图如下：

项目

主页

最热

最新

我的

**

音乐

二、开始撸代码

再看代码结构

两种页面结构

小程序的页面分为两种：page 和 components。 

page就是普通的页面， components是小程序为实现模块化而提供的自定义组件。

相同点： 

都由四个文件：js、json、wxml、wxss、构成，wxml、wxss写法完全相同。

不同点：

components要在json文件中注明："component": true

{

"component": true,

"usingComponents": {

"movie": "movie/movie",

"music": "music/music"

}

}

js文件的结构和生命周期函数不同 

下面是自动生成的page和components代码，可以感受下

page 的 js 代码

Page({

/

页面的初始数据

/

data: {

},

/

生命周期函数--监听页面加载

/

onLoad: function (options) {

},

/

生命周期函数--监听页面初次渲染完成

/

onReady: function () {

},

/

生命周期函数--监听页面显示

/

onShow: function () {

},

/

生命周期函数--监听页面隐藏

/

onHide: function () {

},

/

生命周期函数--监听页面卸载

/

onUnload: function () {

},

/

页面相关事件处理函数--监听用户下拉动作

/

onPullDownRefresh: function () {

},

/

页面上拉触底事件的处理函数

/

onReachBottom: function () {

},

/

用户点击右上角分享

/

onShareAppMessage: function () {

}

})

component 的 js 代码

Component({

/

组件的属性列表

/

properties: {

},

/

组件的初始数据

/

data: {

},

/

组件的方法列表

/

methods: {

}

})

本例中每个 tab 都是一个小程序中定义的 component , 只有最外层包裹的 myapp 是 page，因为page中只能嵌入component，component中也可以嵌入component。

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。下面简单介绍一下开发入门

一、注册小程序账号

1、进入微信公众平台 2、点击立即注册

3、选择小程序 4、填写信息注册即可 5、绑定开发者 6进入“设置-开发设置”，获取AppID信息。 二、下载微信web开发者工具 1点击小程序后的查看详情 2、选择开发者工具 3、下载对应系统版本的应用程序 4、安装开发工具 三、编写小程序实例 1、打开工具点击小程序项目 2、填写相应信息，点击确定 3、实例目录结构 4、appjs是小程序的脚本代码（必须），可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的 API。 5、appjson是对整个小程序的全局配置（必须），用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。微信小程序中的每一个页面的路径+页面名都需要写在appjson的pages中，且pages中的第一个页面是小程序的首页。 6、appwxss是整个小程序的公共样式表（非必须）。 7、indexjs 是页面的脚本文件（必须），在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。 8、indexwxml是页面结构文件（必须）。 9、indexwxss是页面样式表文件（非必须），当有页面样式表时，页面的样式表中的样式规则会层叠覆盖appwxss中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用appwxss中指定的样式规则。 10、在编辑配置好后点击真机调试 11、手机微信扫描二维码 12、自动d出调试窗口，通过真机调试能够更好的测试小程序

问题一：微信小程序是什么 微信小程序功能介绍 小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。沈阳西里奥布科技有限公司

问题二：微信里的小程序是什么意思，怎么用？ 您好！很高兴能为您解答，

所谓的小程序就是无需下载某款应用程序，直接通过微信就可以打开并且使用它，这个功能对于那些手机内存不大的朋友来说算是福音了，那么如何找到它的入口呢？很简单，首先我们打开微信，然后在通讯录里直接搜索小程序示例，如图；

找到以后直接点击进入，我们可以看到它的组件和接口等后台，不过这些对我们来说没有什么用处，我们点击该页面右上角的省略号图标，然后选择显示在聊天顶部，这样便于我们查找，见下图；

此时我们返回到聊天界面，在最顶端会有它的显示，如图；这样我们就可以开始使用它了，不过微信里不会显示它收录的小程序列表，我们需要手动搜索；

比如我们在搜索框输入今日头条，搜索结果里含有lite字样的就说明小程序里包含这款应用，那么无需下载它就可以使用了

接着以上，我们点击进入小程序以后，就打开了这款软件的主界面，如图；同用在该程序的右上角点击省略号图标可以将其置顶，不过功能还是不能完全和下载以后的完全一样，比如发帖/跟帖等暂时还是无法实现的；

问题三：微信小程序空格符怎么写 \r\n 用微信工具看的效果和 在手机上看的距离不一样。

一个汉字的距离是 \r\n\r\n\r\n\r\n

问题四：微信小程序是什么？有具体介绍吗 微信将“小程序”定义为“一种新的应用形态”。微信方面强调，小程微信小程序序、订阅号、服务号、企业号目前是并行的体系。

小程序的推出并非意味着微信要来充当应用分发市场的角色，而是“给一些优质服务提供一个开放的平台。”一方面，小程序可以借助微信联合登录，和开发者已有的 App 后台的用户数据进行打通，但不会支持小程序和 App 直接的跳转。

随着小程序正式上线，用户可以通过二维码、搜索等方式体验到开发者们开发的小程序了。

用户只要将微信更新至最新版本，体验过小程序后，便可在发现页面看到小程序TAB，但微信并不会通过这个地方向用户推荐小程序。

小程序提供了显示在聊天顶部的功能，这意味着用户在使用小程序的过程中可以快速返回至聊天界面，而在聊天界面也可快速进入小程序，实现小程序与聊天之间的便捷切换。

安卓版用户还可将小程序添加快捷方式至桌面。

自选股小程序对APP功能做了相对更多的保留，仅舍弃了“资讯”作为独立板块，而保留了自选、行情、设置三个主要功能板块。并且提供了与APP中一致的股价提醒等功能，分享具体股票页面，好友到的是实时股价信息，体验非常完整。

微信团队此前提到的公众号关联功能在当前的公众号主页已经能够体现。

在开发了小程序的公众号主页上，能够看到该主体开发的小程序，点击即可进入相应小程序。由于处于同一账号体系下，公众号关注者可以更低的成本转化为小程序的用户。

问题五：什么是微信小程序 微信小程序，简称CX，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

小程序处于内测阶段。全面开放申请后，主体类型为个人、企业、 、媒体或其他组织的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。

问题六：微信小程序是什么 微信小程序其实是微信公众平台应用号的前身，据说跟苹果达成协议，苹果要垄断（应用）APP这个词，所以和谐相处，小而美的，叫小程序。

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

――Allen Zhang

关键点：

跨平台，开发简单，对比于安卓系统应用的不安全性，更好的保障了用户的数据。

预加载资源保障极速的用户体验。

随时能够更新资源与交互模式，通过微信通用JS API调用原生接口，保障体验的同时，提供了灵活应变的手段（春晚方案，没到最后一刻，都有可能会有变动，赞助商的投放名单与广告语，也有可能变动，红包方案需要保持灵活应变的手段）。

问题七：微信小程序是什么？微信小程序有什么用 微信小程序是一种不需要下载安装即可使用的应用。特点：

它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。

应用将无处不在，随时可用，但又无需安装卸载。

然而微信应用号要能获取足够多的用户，还得要开发者的支持。毫无疑问，开发者将是微信应用号的最大获益群体。对于开发者而言，应用号可以节省开发成本，并且可以提升研发效率，开发人员只需要研发出一款适用于浏览器应用的产品，就可满足不同 *** 作系统的使用需求。

问题八：微信小程序是什么 微信小程序有什么用 微信小程序是一种不需要下载安装即可使用的应用。当用户关注了一个“应用号”之后，就相当于安装了一款app。在“应用号”内，用户就可以实现对app 的一些基本诉求。

实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。

应用将无处不在，随时可用，但又无需安装卸载。

目前，小程序仍然处于内测阶段。全面开放申请后，主体类型为个人、企业、 、媒体或其他组织的开发者，均可申请注册小程序。沈阳西里奥布科技有限公司

问题九：常用的微信小程序有哪些 推荐一个小程序吧：加油卡充值 行车的朋友可以看看，很常用，很简洁，填写有卡号就行，不用担心信息的泄露

问题十：微信小程序有什么作用？ 微信小程序提供了显示在聊天顶部的功能，这意味着用户在使用小程序的过程中可以快速返回至聊天界面，而在聊天界面也可快速进入小程序，实现小程序与聊天之间的便捷切换。

用户使用过的小程序，将以列表的方式呈现在小程序TAB中。

如此前微信团队介绍的一样，小程序可以分享至对话。

“自选股”小程序分享展示

安卓版用户还可将小程序添加快捷方式至桌面。

从试用结果来看，小程序整体运行顺畅，而开发者也对小程序抱以很大热情，例如猫眼**提供了小程序体验礼包。

在体验了自选股、美团外卖、猫眼**、滴滴公交查询几个小程序后，可以感受出，开发者将APP中最核心的功能在小程序中做了保留，对一些功能则进行了舍弃。

比如滴滴出行小程序，仅保留了叫车功能，而APP中的地图、出行方式选择、用户界面、商城等功能都被舍弃掉了。

滴滴出行小程序界面

自选股小程序对APP功能做了相对更多的保留，仅舍弃了“资讯”作为独立板块，而保留了自选、行情、设置三个主要功能板块。并且提供了与APP中一致的股价提醒等功能，分享具体股票页面，好友到的是实时股价信息，体验非常完整。

左为自选股小程序界面，右为自选股APP界面

微信团队此前提到的公众号关联功能在当前的公众号主页已经能够体现。

在开发了小程序的公众号主页上，能够看到该主体开发的小程序，点击即可进入相应小程序。由于处于同一账号体系下，公众号关注者可以更低的成本转化为小程序的用户。

左为公众号介绍页；右为公众号主体开发的小程序

对于一些有意将公众号进行产品化的团队而言，小程序及其与公众号之间的关联将大大节省开发成本及导流成本。对于内容创业者而言也提供了不错的内容产品化工具。

结合体验及此前微信团队的介绍，小程序规则已经清晰。

以上就是关于微信小程序开发教程全部的内容，包括:微信小程序开发教程、微信小程序底部tab图标大小、12.小程序 之切换到tabBar页面不刷新问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！