微信小程序:总结

本文详细介绍了开发工具的安装与使用,包括Sources、Security、Storage和Trace面板,以及开发微信小程序时的文件结构、CSS盒模型、组件定义、即速应用的开发流程和网络API的使用。
摘要由CSDN通过智能技术生成

第一章:

第一章讲了开发工具的安装和具体使用

以下补充一些:

Sources面板:

源文件调试页,显示当前项目的脚本文件

Security面板:

安全认证信息页,用于调试项目的网络和认证等问题

Storage面板:

数据存储页可以使用接口将数据存储到其中

 Trace面板:

 路由追踪信息页,可以追踪到连接电脑中的安卓信息

第二章:

学习了开发小程序中的各个文件的使用

学习各个文件的作用:


pages文件:各个页面的配置文件,每个文件夹对应一个页面
页面文件:

打开其中一个页面文件夹,可以看到4个文件ts(或.js)是逻辑文件,.json是配置文件,.wxss是样式文件,.wxml是结构文件

注意:.json至少需要一个{},.js至少需要一个Page({})。

.js:可以定义变量,数组的值以键值对呈现:
.wxml:页面控件,结构设置,可以对其中的进行逻辑运算和算术,还可以逻辑处理,模板的建立和调用

app文件:管理主体的设置
app文件:

在pages外,和pages文件夹并列的app打头的文件,是主文件,.wxss用于大致定义页面格式,.json定义全局配置,.ts逻辑处理

app.json:注册页面文件,用于页面文件注册(如图“pages”项),进行窗口和下拉窗口简单设置(如图“window”项)

页面跳转图标设置(如图“tabBar”项),“list”项必须是前面“pages”项注册的页面地址,点击对应地址的图标,可以跳转到对应页面

第三章:

盒子模型:


盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin)。

这些都是通过css语法进行设置的,具体如下:

块级元素和行类元素:


基本的两类盒子,标签自带其中一种,例如:view为块级,p为行内,由css中display控制

块级元素:


    可以独占一行,可以设置长宽高,可以嵌套块级元素和行内元素,display属性为block

行内元素:


    不会独占空间,不可设置长宽高,不能嵌套快进元素,display属性为inline

行内块元素:


     具有块级和行内的特征,display属性为inline-block

浮动与定位:


浮动:


    元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制,移到父元素指定的位置的过程,由css中的float属性控制,具体如下

flex布局:


   意为弹性盒子布局,简单快速的完成各种伸缩设计

第四章:

组件的定义及属性:


    组件通过属性来进一步细化。不同的组件可以有不同的属性,但它们也有一些共用属性,如id、class、style、hidden、data-*、bind */catch *等  

        1.id 组件的唯一表示,保持整个页面唯一,不常用

        2. class 组件的样式类,对应 WXSS 中定义的样式

        3.  style 组件的内联样式,可以动态设置内联样式

        4. hidden 组件是否显示,所有组件默认显示

        5. data-*自定义属性,组件触发事件时,会发送给事件处理函数。事件处理函数可
以通过传人参数对象的 currentTarget,dataset 方式来获取自定义属性的值

        6. bind*/catch* 组件的事件,绑定逻辑层相关事件处理函数

容器视图组件:


view:
    容器视图组件是能容纳其他组件的组件,是构建小程序页面布局的基础组件,主要包括view、scroll-view和swiper 组件。

下图是view的特有属性

scroll-view:设置scroll-view组件可以实现滚动视图的相关功能

swiper:轮播图,图片预览,页面滑动

 基础内容控件:


icon:图标组件:通常表示一种状态

text:用于展示内容,支持长按选中,行内元素

progress:用于显示进度状态

表单控件: 


button:实现用户和应用之间交互

radio:单选框

checkbox:复选框

swich:开关选择器

slider:滑动选择器

picker: 滚动组件选择器

picker-view: 嵌入页面滚动选择器

input:输入框,用于收集用户的信息

textarea:textarea组件为多行输入框组件,可以实现多行内容的输入

label:标签组件:提升表格的使用性

多媒体组件:


 image:图像组件

 audio:音乐播放组件

video:视频播放器

camera:拍照组件

其他组件:


map:地图组件

.canvas:绘图工具组件

第五章:

  即速应用是深圳市咫尺网络科技开发有限公司开发的一款同时兼具微信小程序和支付宝小程序快速开发能力的工具, 用户只需简单拖拽可视化组件, 就可以实现在线小程序开发。据不完全统计, 在微信小程序正式发布的1 年内, 在即速应用上打包代码并成功上线的微信小程序已经超过5 万个。

即速应用的功能特点主要体现在以下几个方面:

1.开发流程简单, 零门槛制作 


使用即速应用来开发微信小程序的过程非常简单, 无须储备相关代码知识, 没有开发经验的人也可以轻松上手。

(1) 登录即速应用的官方网站(www.jisuapp.cn), 进入制作界面, 从众多行业模板中选择一个合适的模板。

(2) 在模板的基础上进行简单编辑和个性化制作。

(3) 制作完成后, 将代码一键打包并下载。

(4) 将代码上传至微信开发者工具。

(5) 上传成功后, 等待审核通过即可。

2.行业模板多样, 种类齐全


即速应用为广大开发者提供了非常齐全的行业解决方案。 目前, 即速应用已经上线60多个小程序行业模板, 涉及餐饮(单店版、多店版)、婚庆、旅游、运动、美容、房地产、家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业。

这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道, 降低运营成本, 提高管理效率。

3.丰富的功能组件和强大的管理后台 即速应用的功能组件和管理后台非常实用, 可以根据实际情况解决商家的不同需求。


目前, 即速应用有4 个版本, 分别为基础版、高级版、尊享版和旗舰版。 基础版为免费使用的版本, 适合制作个人小程序, 其他版本根据功能不同可以满足不同企业的需求。 即速应用的应用范围主要包括以下类型:

(1) 资讯类: 新闻、媒体。

(2) 电商类: 网购(服装、电器、读书、母婴……)。

(3) 外卖类: 餐饮及零售。

(4) 到店类: 餐饮及酒吧。

(5) 预约类: 酒店、KTV、家教、家政, 其他服务行业

第六章:

网络API


  卫星小程序数据通常从后台获取,使用微信原生的API接口或第三方的接口实现获取

发起网络请求:
  使用wx.request方法实现向服务器发起请求

下载文件:wx.downloadFile

上传文件:可以通过wx.uploadFile接口把文件上传到服务器端

.

 多媒体API:


主要包括图片,音频,视频

图片API:

wx.chooserInage:选择图片或拍照

wx.previewImage:浏览图片

wx.getImageInfo:获取图片信息

wx.saveImageToPotoAlbum:保存图片


 录音API:

wx.startRecord开始录音

wx.stopRecord结束

音频播放API:

wx.playVoice:开始播放语音

wx.pauseVoice:暂停

wx.stopVoice:结束

文件API:

保存文件:

wx.saveFile:用于保存文件到本地, 其相关参数如表所示。
wx.getSaveFileList:获取本地文件的文件信息

删除文件:

wx.removeSaveFile:删除本地文件


打开本地文档:

wx.openDocument:新开页面打开文档



 本地数据和缓存API:


保存和获取:

wx.setStorage:保存

wx.getStorage:获取
 

 删除数据:

wx.removeStorage:删除数据


 位置信息API:


获取位置信息:wx.getLocation


选择位置信息: wx.chooseLocation


 显示位置信息:wx.openLocation



设备相关API: 


获取系统信息:

wx.getSystemInfo:异步获取系统信息

wx.getSystemInfoSync:同步获取系统信息

网络状态:wx.getNetworkType


拨打电话接口:wx.makePhoneCall


扫描二维码:wx.scanCode接口

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值