小程序开发

让我们今天分享小程序开发

1、 背景

微信小程序，英文缩写为mini program，是一种无需下载和安装即可使用的app。它实现了app“触手可及”的梦想。用户可以通过扫描或搜索打开app。app完全开放后，主要类型为企业、政府、媒体、其他组织或个人的开发者可以申请注册小程序。小程序、订阅号、服务号和企业号是并行系统。2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。

2、 知识分析

小程序开发前的准备工作：

① 点击微信公众平台（mp.weixin.qq.com）官方主页右上角的“立即注册”按钮；

② 填写电子邮件地址和密码：请填写未注册公共平台、开放平台、企业账户或个人号码的电子邮件地址。

③ 绑定微信登录：微信需要绑定银行卡。

④ 绑定开发人员：输入“设置-开发设置”以获取AppID信息。添加的项目必须具有AppId；个人主小程序最多可绑定5名开发者和10名体验者；

⑤ 下载小程序开发工具开发

3、 常见问题解答

小程序中的各种配置

4、 解决方案

3.1基本目录结构

小程序的主要部分由三个文件组成，这些文件必须放在项目的根目录中，如下所示：

必须填写文档

app。js是小程序逻辑

app。json是applet公共设置

app。wxss无小程序公共样式表

小程序页面由四个文件组成：

需要文档类型

Js是页面逻辑

Wxml是页面结构

Wxss无页面样式表

Json无页面配置

HTML标记

视图容器：视图、滚动视图、滑动器、可移动视图

基本内容：图标、文本、进度

表单组件：按钮、复选框、表单、输入、标签、选择器、选择器视图、单选按钮、滑块、开关、文本区

导航：导航器

媒体组件：音频、图像、视频

地图：地图

帆布

客服喷漆：联系按钮

WXSS样式

通常，有两个扩展特征：尺寸单位和样式导入

尺寸单位：rpx（反应像素）：根据屏幕宽度自适应。指定的屏幕宽度为750rpx。例如，在iPhone 6上，如果屏幕宽度为375px，并且总共有750个物理像素，那么750rpx=375px=750个物理象素，1rpx=0.5px=1个物理像素

样式导入：使用@import语句导入外部样式表。@import语句后面是要导入的外部样式表的相对路径；指示语句的结尾。

选择器支持：class、id、element、：before、：after

全局样式和本地样式：在app中定义wxss中的样式是一种全局样式，作用于每个页面。页面的wxss文件中定义的样式是本地样式，它仅适用于相应的页面，并将覆盖wxss中的app Same选择器

事件

类型触发条件

触摸启动

触摸移动

触摸取消手指触摸操作被中断，如呼叫提醒和弹出窗口

触摸端

轻触，触摸后立即离开

用长敲击手指触摸后，350毫秒后离开

5、 编码实践

6、 扩展思维

小程序可以使用windows对象的方法吗？

小程序中的原生js中没有窗口对象，因此目前无法使用窗口对象中的第三方框架和方法

7、 参考文献

参考文献1：

8、 更多讨论

1.组件是否已写入？

答：是的，您也可以添加标签来更改样式。参考官方网站上的组件

2.我能用angularjs写吗

A： 不应该。它不支持第三方插件

3.Wxss与css相同？

A： 所有的样式和编写方法都是相同的，但是wxss中有一个额外的单元rpx

9、 其他

PPT链接：https://ptteng.github.io/WEB/ppt/js-11-use%20miniProgram.html#/

视频链接：

undefined_腾讯视频

今天的分享就到这里了。欢迎您点赞、转发、留言和拍砖~