美文网首页
什么是小程序?

什么是小程序?

作者: 吴杰看世界 | 来源:发表于2018-03-19 15:58 被阅读0次

    大家好,我是IT修真院北京分院web第29期学员吴昊杰,一枚正直纯洁善良的web程序员。 

    【js-11】如何开发小程序?

    分享人:吴昊杰

    目录

    1.背景介绍

    2.知识剖析

    3.常见问题

    4.解决方案

    5.编码实战

    6.扩展思考

    7.参考文献

    8.更多讨论

    1.背景介绍

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

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

                        2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线。

    2.知识剖析

    2.1 小程序是什么?它有着什么样的功能?

    先引用张小龙的一句话来看看啥是小程序?

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

    2.2  小程序的开发前准备:

    ①在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的“立即注册”按钮;

    ②填写邮箱和密码:请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。

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

    ④绑定开发者:进入“设置-开发设置”,获取AppID信息,添加项目必须要有AppId;个人主体小程序最多可绑定5个开发者,10个体验者;

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

    3.常见问题

    3.1  基本目录结构

    一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

    文件

    必填

    作用

    app.js

    小程序逻辑

    app.json

    小程序公共设置

    app.wxss

    小程序公共样式表

    一个小程序页面由四个文件组成,分别是:

    文件类型

    必填

    作用

    js

    页面逻辑

    wxml

    页面结构

    wxss

    页面样式表

    json

    页面配置

    3.2 主体部分的配置

    app.json 配置项解释

    属性

    类型

    必填

    描述

    pages

    String Array

    设置页面路径

    window

    Object

    设置默认页面的窗口表现

    tabBar

    Object

    设置底部 tab 的表现

    networkTimeout

    Object

    设置网络超时时间

    debug

    Boolean

    设置是否开启 debug 模式

    3.3 子页面app.json

    每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

                    页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键

    4.解决方案

    4.1 html标签

    视图容器:view,scroll-view,swiper,movable-view

    基本内容:icon,text,progress

    表单组件:button,checkbox,form,input,label,picker,picker-view,radio,slider,switch,textarea

    导航:navigator

    媒体组件:audio,image,video

    地图:map

    画布:canvas

    客服绘画:contact-button

    4.2 WXSS样式

    基本和我们平常的一样,有两个拓展特性:尺寸单位,样式导入

    尺寸单位:rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

    选择器支持:class,id,element,:before,:after

    全局样式与局部样式:定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

    4.3 事件

    类型

    触发条件

    touchstart

    手指触摸动作开始

    touchmove

    手指触摸后移动

    touchcancel

    手指触摸动作被打断,如来电提醒,弹窗

    touchend

    手指触摸动作结束

    tap

    手指触摸后马上离开

    longtap

    手指触摸后,超过350ms再离开

    5.编码实战

    6.扩展思考

    小程序能否使用windows对象的方法?

    小程序中没有原生js中的window对象,因此现暂时无法使用第三方框架以及使用window对象中的方法

    7.参考文献

    参考一:微信简明教程

    参考二:微信小程序原理

    8.更多讨论

    1 除了指定的路由页可以进行页面跳转,还有其他页面跳转方法么?

    wx.navigateTo(OBJECT)方法:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

    2 从电脑上可否访问到相应小程序?

    小程序相当于一个app工具,并不是一个网址,所以无法访问。

    感谢观看

    BY :孙剑立|吴昊杰

    课后提问部分:

    提问:1.小程序是如何传参的?

    回答:https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html

    其实官方文档中写的很好,可以参考...

    小程序能否使用windows对象的方法?

    小程序中没有原生js中的window对象,因此现暂时无法使用第三方框架以及使用window对象中的方法

    提问:2.除了指定的路由页可以进行页面跳转,还有其他页面跳转方法么?

    回答:wx.navigateTo(OBJECT)方法:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

    提问:3. 从电脑上可否访问到相应小程序?

    回答:小程序相当于一个app工具,并不是一个网址,所以无法访问。

    git浏览地址:https://ptteng.github.io/WEB/ppt/如何开发小程序?.html#/

    视频地址:https://v.qq.com/x/page/m0608h3orec.html

    相关文章

      网友评论

          本文标题:什么是小程序?

          本文链接:https://www.haomeiwen.com/subject/zxlpqftx.html