小程序市场前景解析,web前端开发小程序案例

小程序市场前景解析,web前端开发小程序案例

WEB前端系列课程-微信小程序实战教程讲解_WEB前端食疗坊实战项目讲解_WEB小程序开发前端必备知识点_WEB前端小程序开发实战课程_

1 界面与操作

微信小程序开发工具的功能非常强大和便捷,其工具内部集成了代码编辑、开发调试及程序发布等功能,

2 编辑功能

编辑区分为两个部分,在右侧的编辑区域可以对当前项目进行编写、文件添加和删除以及重命名等基本操作。在左侧的模拟器区域可以实时预览编辑的情况。编辑器同时也提供了比较完善的自动补全和自动保存功能,编写代码后,工具会自动帮助用户保存当前代码为编辑状态,如果直接关闭工具或者切换项目,也不会丢失当前代码的编辑状态。

但是要注意,处于编辑状态的代码只保存到工具内部,并没有写到硬盘上,

只有手动保存文件后,修改的内容才会写到硬盘上,并触发实时预览。

3 调试功能

调试工具分为七大功能模块:Console、Sources、Network、Storage、AppData、Wxml和Sensor,

4 项目功能

编辑器项目选项卡主要用于显示和设置项目的信息,其中显示的信息包括图标、AppID、本地开发目录、最新更新时间、最近上传时间以及代码包大小。·

预览:指上传源码到微信服务器并成功后会生成一个二维码,开发者用最新版本的微信扫描二维码后,即可在手机上体验到最新的效果。

5 项目的目录与文件结构

在创建小程序项目时,小程序开发工具会默认生成一些文件,这些文件就是小程序的基本结构。除此之外,在开发过程中,可以根据产品需求自定义小程序的目录和文件。

微信小程序开发基础

全局配置

微信小程序的全局配置都要在app.JSON文件中进行。

这些配置可以决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

pages配置项

pages接受一个数组值,每一项都是字符串,用来指定小程序由哪些页面组成。

每一项代表对应页面的[路径+文件名]信息。

window配置项

window接受对象值,用来设置小程序的状态栏、导航条、窗口页面等对象的基本样式属性。

tabBar配置项

tabBar接受一个数组值,用来设置tab底部标签栏的样式表现,以及tab切换时显示的对应页面。

networkTimeout配置项

networkTimeout接受对象值,用来设置各种网络请求对象超时时间。超时时间单位为毫秒,默认为60000。

debug配置项

debug接收一个Boolean值,用于设置开启开发者工具的调试模式。默认是false,开启后,在开发者工具的控制台面板中,调试信息以info的形式给出,其信息有Page的注册、页面路由、数据更新、事件触发。这样可以帮助开发者快速定位一些常见的问题,但是,在正式发布时,应当关闭此配置项。

页面配置

微信小程序除了app.json全局配置,还可以对每一个页面的.json进行单独配置。每个页面的配置比app.json全局配置简单得多,只是设置app.json中的window配置项的内容,页面中配置项会覆盖app.json的window中相同的配置项。页面的.json只能设置window相关的配置项,以决定本页面的窗口表现,所以无须写window这个键。

页面的生命周期

每个微信小程序应用都有自己的生命周期,而微信小程序应用的每个页面也有自己的生命周期,

页面的数据处理

页面的数据处理分两个方面,首先是初始化数据,其次是对数据进行操作。

数据的初始化

初始化数据将作为页面的第一次渲染。data会以JSON的形式由逻辑层传至视图层(也就是从.js文件传入到.wxml文件中,视图层可以通过WXML对数据进行绑定),所以其数据必须是可以转成JSON的格式的字符串、数字、布尔值、对象、数组。

页面的栈

微信小程序提供的框架是以栈的形式维护所有页面。

注意:

· 不要尝试修改页面栈,会导致路由以及页面状态错误。

页面的路由

在微信小程序中,所有页面的路由全部由框架进行管理。

简单封装与调用

文件作用域

在.js文件中声明的变量和函数只在该文件中有效;在不同的文件中可以声明相同名字的变量和函数,

不会互相影响。

通过全局函数getApp()可以获取全局的应用实例,如果需要全局的数据,

则可以在App()中设置。

模块化

在日常编程过程中,一般都会把一些可以复用的代码提炼出来,放到一个公共文件中。在微信小程序中,可以将一些公共的代码抽离成为一个单独的JS文件,作为一个模块。模块只有通过module.exports或者exports才能对外暴露接口。

Flexbox布局

微信小程序通过Flexbox模型布局对组件进行排列。相比普通的布局方式,Flexbox更容易实现宽高适合屏幕的布局,使用起来更灵活,非常适合于微信小程序的布局要求。

1 基本要素

Flexbox布局的主要思想为通过设定容器(flex container即伸缩容器)与子元素(flex item即伸缩项目)的规则,使所有view组件在主轴(main axis)与侧轴(cross axis)上合理地自动分配

2 容器属性

容器属性指的是包裹子元素的容器(flex container)属性

3 子元素属性

子元素属性定义了伸缩项目的属性,

4 position属性

position属性用于指定一个元素在文档中的定位方式

5 边框、空隙与填充

边框很好理解,空隙指的是组件之间的距离,而填充指的是组件的内容到其边框的距离,

组件的开发应用

组件是视图层的基本元素,是构建页面的基础。

每个组件都有自定义的属性,可以对功能样式进行修改,但只支持以下七种数据类型

:1 视图容器组件

微信小程序具有丰富的用户界面组件,借助这些组件,开发者可以很方便地搭建用户界面。

2 基础内容组件

基础内容组件用于在界面中展示图标、文字、滚动条信息等。

3 表单组件

表单组件用于构建与用户交互的表单。

4 多媒体组件

多媒体组件可以在页面中加载图片、音频、视频,并且能够控制显示方式和进程,使页面更加多元化,更具吸引力。

5 地图组件

地图组件,微信小程序提供了地图导航功能,使用地图组件和地图位置API就可以方便、快捷地实现地图定位导航。

6 导航组件

导航组件,它是微信小程序中用来控制所有页面顺序的组件。可以帮助我们实现页面的路由和跳转,使用起来相当便捷。

7 画布组件

画布组件,它可用于实现一些小程序控件没有提供的页面元素,

开发者可以自由地使用画布画出想要的页面效果。

本文来自作者:运维笔记ywbj,不代表小新网立场,更多干货关注公众号:zhantianss(长按复制)

转载请注明:https://www.xiaoxinys.cn/190087.html

(0)

相关推荐