介绍
1.什么是小程序？
小程序是无需下载安装即可使用的应用。它实现了触手可及的梦想。用户可以通过扫描或搜索打开应用，它也实现了用后即跑的想法。用户不必安装太多应用，应用随处可用，但无需安装或卸载。
二、公开报名的范围:
企业、政府、媒体和其他组织
三。受试者信息和验证方法:
企业型账户可以选择两种主要的验证方式:
方法一:你需要用公司的企业账号给腾讯打款，验证主体身份。提交主题信息后可以查看付款信息。
方法二:通过微信认证验证主体身份，需要缴纳300元认证费。在通过认证之前，小程序的部分功能暂时无法使用。
政府、媒体等机构的账号必须通过微信认证。在通过认证之前，小程序的部分功能暂时无法使用。
特别提醒:小程序主要信息一经提交，不可修改。
第四，完善小程序信息
注册后，微信小程序的信息完善步骤和开发可以同步进行。
选择对公支付的用户，在完成汇款验证后，可以补充小程序名称信息，上传小程序头像，填写小程序介绍，选择服务范围。
选择微信认证验证主体身份的用户，需要先完成微信认证，才能补充小程序名称信息，上传小程序头像，填写小程序介绍，选择服务范围。
动词（verb的缩写）开发前的准备:
1.绑定开发人员
登录微信公众平台小程序，输入用户身份-开发者，添加绑定开发者。认证的小程序可以绑定到不超过20个开发者。未认证的小程序最多只能绑定10个开发者。
2.获取AppID
转到“设置-开发设置”并获取AppID信息。
3.阅读开发文档并下载开发工具。
点击页面右上角的文档-开发，详细阅读开发者文档，进入下载页面下载开发者工具。
不及物动词客户服务系统
为了丰富小程序的服务能力，提升服务质量，微信为小程序提供客服消息能力，让小程序用户可以方便快捷地与小程序服务商沟通。
设计
一.总结
设计基于充分尊重用户的知情权和运营权，旨在微信生态内部建立友好、高效、一致的用户体验，同时最大程度地适应和支持不同需求，实现用户和小程序服务商的共赢。
第二，友好礼貌
在微信上使用小程序服务时，为了避免用户的注意力被周围复杂的环境干扰，小程序的设计要减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，引导用户友好地 *** 作。
1.焦点
每个页面都应该有一个清晰的焦点，这样用户每次进入新的页面都能快速理解页面的内容。在确定重点的前提下，尽量避免页面上出现其他与用户决策和 *** 作无关的干扰因素。
2.过程很清楚。
为了让用户流畅地使用页面，当用户正在进行某个 *** 作过程时，要避免被用户目标过程之外的内容打断用户。
第三，清晰明确
用户一旦进入我们的小程序页面，我们就有责任和义务明确告知用户他在哪里，可以去哪里，并保证用户可以轻松穿梭页面而不会迷路，从而为用户提供安全愉悦的体验。
1.清晰导航，来去自如
导航是保证用户在网页浏览和跳转时不会迷路的最关键因素。导航需要告诉用户他们在哪里，可以去哪里，怎么回去。首先，微信系统中所有小程序的所有页面，都会有微信提供的自己的导航栏，解决去哪里，怎么回去的问题。微信层面的导航保持了体验的一致性，有助于用户在微信内部形成统一的体验和交互认知，不会在小程序和其他微信页面的切换中增加新的学习成本或改变使用习惯。
微信导航区(iOS)
微信进入小程序首页时，导航区通常只有一个 *** 作——“返回”，就是返回到进入小程序前的微信页面。小程序后进入二级页面，导航区的 *** 作是——“返回”和“关闭”。“返回”，即返回到之前的小程序界面或微信界面。“关闭”是指在当前界面直接退出小程序，回到进入小程序前的微信页面。
微信导航区(安卓)
导航区只有一个独特的 *** 作——直接退出小程序，回到微信或系统桌面再进入小程序。Android手机自带的硬件返回键执行返回上一页的 *** 作。
2.减少等待，及时反馈。
页面等待时间长会造成用户心情不好，微信小程序提供的技术可以大大缩短等待时间。即便如此，当加载和等待不可避免地发生时，也需要及时反馈，缓解用户等待的不良情绪。
3.格外可控，有出路。
在设计任何任务和流程的时候，异常的状态和流程往往会被忽略，而这些异常的场景往往是用户最郁闷最需要帮助的时候。所以要特别注意异常状态的设计，出现异常时要给用户必要的状态提示，并告知解决方法，让他们有出路。
要杜绝用户百思不得其解，无处可去，非正常状态下停滞在某个页面的情况。上面提到的模态对话框和结果页可以作为异常状态的提醒。此外，在表单页面中，尤其是表单项较多的页面，应该明确指出错误项，以便用户修改。
第四，方便优雅
从PC时代的实体键盘鼠标到移动时代的手指，虽然输入设备大大简化，但手指 *** 作的准确度远不如键盘鼠标准确。为了适应这种变化，开发者需要在设计过程中充分利用手机的特性，让用户方便优雅地控制界面。
1.减少投入
由于手机键盘面积小且密集，输入困难，容易造成输入错误。因此，在设计小程序页面时，利用已有的界面或其他易于 *** 作的选择控件来改善用户输入体验。
2.避免误 *** 作
因为我们在手机上是用手指触摸屏幕来控制界面的，所以手指的点击精度远不如鼠标。因此，在设计页面上要点击的控件时，我们需要充分考虑热点区域，避免可点击区域过小或过密导致的误 *** 作。将原本在电脑屏幕上使用的界面简单移植到手机上，不做任何适配，往往会出现这种问题。由于手机屏幕分辨率不同，点击的最佳像素大小也不完全相同，但换算成物理尺寸后大致在7mm-9mm之间。在微信提供的标准组件库中，各类控件元素已经兼顾了页面点击效果和不同屏幕的适配，建议再次使用或模仿标准控件大小进行设计。
3.使用界面来提高性能。
微信设计中心已经推出了一套网页标准控件库，包括素描设计控件库和Photoshop设计控件库，未来还会完善小程序组件。这些控件已经充分考虑了移动页面的特点，能够保证其在移动页面上的可用性和 *** 作性能；同时，微信开发团队也在不断完善和扩展微信小程序接口，并提供微信公共库。利用这些资源不仅可以为用户提供更快捷的服务，还可以大大提升页面性能，无形中提升用户体验。
动词（verb的缩写）团结稳定
除了上述原则，建议接入微信的小程序要时刻注意不同页面的统一性和连续性，尽量在不同页面使用相同的控件和交互方式。
统一的页面体验和连续的界面元素，有助于以最低的学习成本达到使用目标，减少页面跳转带来的不适感。正因如此，小程序可以根据需要使用微信提供的标准控件，达到统一稳定的目的。
不及物动词视觉规范
1.字体规格
微信内部字体与运行系统字体一致。常见的字号有20，18，17，16，1413，11(pt，13，11(PT)。使用场景如下:
字体颜色:
主要内容为黑色，次要内容为灰色；时间戳的默认值是浅灰色；大段的描述内容和它所属的主要内容都用半黑色。
蓝色是链接颜色，绿色是完成颜色，红色是错误颜色。按下和禁用状态的透明度分别降低20%和10%。
2.列表视觉规格:
3.表单输入可视规范:
4.按钮使用的原则:
5.图标使用的原则:
剥削
一.框架
小程序开发框架的目标是让开发者尽可能以最简单高效的方式，在微信中开发出具有原生app体验的服务。
框架提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并提供了视图层和逻辑层之间的数据传输和事件系统，可以让开发者方便地专注于数据和逻辑。
二、基本组件
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件快速开发。
三。应用程序接口
框架提供了丰富的微信原生API，可以轻松调动微信提供的能力，如获取用户信息、本地存储、支付功能等。
四。简单教程
1.获取微信小程序的AppID。
登录微信公众平台，可以在网站的设置-开发者设置中查看微信小程序的AppID。请注意，您不能直接使用服务号或订阅号的AppID。
注:如果你想用非管理员微信号在手机上体验这个小程序，那么我们还需要 *** 作“绑定开发者”。即在“用户身份”——“开发者”模块中，绑定需要体验小程序的微信号。本教程默认账号注册和体验都是使用管理员微信号。
2.创建项目
我们需要通过开发者工具完成小程序的创建和代码编辑。
开发者安装好工具后，打开使用微信扫码登录。选择“项目”，填写上面获取的AppID，设置一个本地项目的名称(不是小程序的名称)，比如“我的第一个项目”，选择一个本地文件夹作为存储代码的目录，点击“新建项目”。
为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是空文件夹，开发者工具会提示是否创建快速入门项目。选择“是”,开发工具将帮助我们在开发目录中生成一个简单的演示。
项目创建成功后，我们可以点击项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”中查看并编辑我们的代码，在“调试”中测试代码并在微信客户端模拟小程序的效果，在“项目”中发送到手机上预览实际效果。
3.写代码
创建子视图实例:
点击开发者工具左侧导航中的“编辑”，我们可以看到这个项目，它已经被初始化，包含一些简单的代码文件。其中最重要最本质的就是app.js，app.json和app.wxss，。js后缀是脚本文件，。json后缀是配置文件，而。wxss后缀是样式表文件。微信小程序会读取这些文件，生成小程序实例。
我们先简单看一下这三个文件的作用，这样我们就可以轻松地从零开始修改和开发自己的微信小程序了。
App.js是小程序的脚本代码。在这个文件中，我们可以监控和处理小程序的生命周期函数，并声明全局变量。调用框架提供的丰富API，比如本例中本地数据的同步存储和同步读取。
//app.jsApp({
OnLaunch:function(){//调用API从本地缓存获取数据
varlogs=wx.getstoragesync('logs')||[]
logs.unshift(Date.now())
wx.setStorageSync('logs'，日志)
},
getuserinfo:function(CB){varthat=this；if(this.globaldata.userinfo){typeofCB=="function"&；&cb(this.globalData.userInfo)
}else{//调用登录接口
wx.login({
成功:函数(){
wx.getUserInfo({
成功:函数(res){
that.globaldata.userinfo=RES.userinfo；cb=="函数"的类型。&cb(that.globalData.userInfo)
}
})
}
});
}
},
全局数据:{
userInfo:空
}
})
App.json是整个小程序的全局配置。在这个文件中，我们可以配置applet包含哪些页面、applet窗口的背景颜色、导航栏的样式和默认标题。请注意，不能向该文件添加任何注释。
{"页面":["页面/索引/索引"，"页面/日志/日志"
]、"window":{"backgroundtextstyle":"light"、"navigationBarBackgroundColor":"#fff"、"navigationBarTitleText":"微信"、"navigationBarTextStyle":"black"
}
}
App.wxss是整个小程序的公共样式表。
/**app.wxss**/。容器{高度:100%；显示器:flex伸缩方向:列；对齐-项目:居中；justify-content:space-between；填充:200rpx0；框大小:边框-框；
}
创建页面
在本教程中，我们有两个页面，索引页面和日志页面，即applet启动日志的欢迎页面和显示页面。它们都在页面目录中。微信小程序中每个页面的【路径+页面名称】都需要写在app.json的pages中，pages中的第一页就是小程序的首页。
每个小程序页面都是由四个不同的后缀文件在同一个路径下同名组成，比如:index.js，index.wxml，index.wxss，index.json文件带。js后缀是脚本文件。json后缀是配置文件，文件带有。wxss后缀是样式表文件。wxml后缀是页面结构文件。
Index.wxml是页面的结构文件:
{{userInfo.nickName}}
{{座右铭}}
在此示例中，、用于构建页面结构、绑定数据和交互处理功能。
Index.js是页面的脚本文件。在这个文件中，我们可以监控和处理页面的生命周期功能，获取小程序实例，声明和处理数据，响应页面交互事件等。
//index.js//获取应用实例varapp=getApp()
页面({
数据:{
座右铭:“你好，世界”，
userInfo:{}
}，//事件处理程序
bindViewTap:function(){
wx.navigateTo({
'url:'../logs/logs
})
},
onLoad:function(){console.log('onLoad')var=this
//调用应用程序实例的方法来获取全局数据
app.getuserinfo(function(userinfo){//更新数据
that.setData({
用户信息:用户信息
})
})
}
})
Index.wxss是页面的样式表:
/**index.wxss**/。userinfo{显示:flex伸缩方向:列；对齐-项目:居中；
}.userinfo-avatar{width:128rpx；身高:128rpx保证金:20rpx边界半径:50%；
}.userinfo-昵称{color:#AAA；
}.用户座右铭{margin-top:200px；
}
页面的样式表是不必要的。当有页面样式表时，页面的样式表中的样式规则会叠加app.wxss中的样式规则如果不指定页面的样式表，也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。
Index.json是页面的配置文件:
页面的配置文件是不必要的。当页面存在配置文件时，该配置项将覆盖该页面上app.json窗口中的相同配置项。如果没有指定的页面配置文件，将在该页面上直接使用app.json中的默认配置。
日志的页面结构:
{{index+1}}。{{log}}
logs页面使用控制标签来组织代码，使用wx:for来绑定日志数据，并将日志数据循环展开到节点。
//logs.jsvarutil=require('../../utils/util.js’)
页面({
数据:{
日志:[]
},
onLoad:function(){this.setdata({
日志:(wx.getStorageSync('logs')||[])。map(function(log){returnutil.formattime(newDate(log))
})
})
}
})
4.手机预览
在工具左侧菜单栏选择“项目”，点击“预览”，扫码后即可在微信客户端体验。
奔跑
具体 *** 作规范:
使用微信小程序平台的服务，必须阅读并遵守微信小程序平台的服务条款以及腾讯为此制定的特别规则。
能力
小程序七大能力解读；
离线扫码:用户可以在小程序中使用扫描。
共享:用户可以与朋友或群聊分享小程序或他们的任何页面。
注意:商家可以向接受过服务的用户发送模板消息，用户可以在小程序中联系客服，支持文字和图片。
小程序切换:用户可以在使用小程序的同时快速返回聊天。
历史记录:用户使用的小程序将在下次被放入列表中。
微信官方账号:微信小程序可以关联微信官方账号。
搜索:用户可以直接按名称或品牌搜索小程序。
问题和答案
1.小程序的入口在哪里？
微信里没有小程序的入口。微信希望小程序的启动来自于扫描二维码。
2.有没有可以下载小程序的appstore？
小程序没有下载流程，所以没有小程序应用商店。
3.小程序可以推送消息吗？
小程序不能推送消息，但是会提供有限的服务到达能力。
4.小程序可以分享给朋友吗？
小程序不能分享到朋友圈，但是可以分享到聊天和群里。
5.小程序和微信官方账号是什么关系？
在微信官方账号中，可以看到同一企业在微信官方账号中还做了哪些小程序，或者在一个小程序中，还可以看到做这个小程序的企业做了哪些微信官方账号，可以互相跳转。
作者:小明来源:人人都是产品经理
注:阅读相关建站技巧请移至建站教程频道。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）