小程序模板网

廖马儿:IOS程序员学微信小程序开发系列《二》:组件,API,工具 ... ...

发布时间:2018-03-29 18:15 所属栏目:小程序开发教程
一:组件

1.基础组件:

什么是组件:


  • 组件是视图层的基本组成单元。

  • 组件自带一些功能与微信风格的样式。

  • 一个组件通常包括开始标签
    和结束标签
    ,属性
    用来修饰这个组件,内容
    在两个标签之内。

2.属性类型


  • Boolean 布尔值 组件写上该属性,不管该属性等于什么,其值都为true
    ,只有组件上没有写该属性时,属性值才为false
    。如果属性值为变量,变量的值会被转换为Boolean类型

  • Number 数字 1
    , 2.5

  • String 字符串 "string"

  • Array 数组 [ 1, "string" ]

  • Object 对象 { key: value }

  • EventHandler 事件处理函数名 "handlerName"
    是 Page中定义的事件处理函数名

  • Any 任意属性

3.共同属性类型

id,class,style,hidden,data-*,bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类:

视图容器(View Container):
view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content):
icon 图标, text 文字, progress 进度条

表单(Form):
button 按钮, form 表单, input 输入框, checkbox 多想选择器, radio 单选器, picker列表选择器, slider滚动选择器, switch 开关选择器, label标签.
操作反馈(Interaction)
action-sheet 上拉菜单
modal 模态弹窗
toast 消息提示框
loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片, video 视频
地图

map 地图

画布Canvas
canvas 画布

flex: vt.折曲,使收缩; vi.玩去,收缩



二:API

1.API

框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。

说明:
wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。
*OBJECT中可以指定success
, fail
, complete
来接收接口调用结果。

2.API列表: 省略
网络 API 列表:
媒体 API 列表:
数据 API 列表:
位置 API 列表:
设备 API 列表:
界面 API 列表:
开放接口:

每个微信小程序需要事先设置一个通讯域名,小程序可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求(wx.request)、 WebSocket 通信(wx.connectSocket)、上传文件(wx.uploadFile)和下载文件(wx.downloadFile)。

示例代码:


	
  1. wx.request({
  2. url: 'test.php', data: {
  3. x: '' ,
  4. y: ''
  5. }, header: {
  6. 'Content-Type': 'application/json'
  7. }, success: function(res) {
  8. console.log(res.data)
  9. }
  10. })
三:工具

1.为了帮助开发者简单和高效地开发微信小程序,微信推出了全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能。

程序调试主要有三大功能区:模拟器、调试工具和小程序操作区

模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

2. 调试工具分为 6 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage以及Wxml pannel.Sources pannel.Network pannel.Appdata pannel.Storage pannel.Console pannel. 小程序的错误输出,会显示在Console

3.常用快捷键

格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一 Shift+Alt+F:代码格式化 Alt+Up,Alt+Down:上下移动一行 Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行 Ctrl+Shift+Enter:在当前行上方插入一行

光标相关 Ctrl+End:移动到文件结尾 Ctrl+Home:移动到文件开头 Ctrl+i:选中当前行 Shift+End:选择从光标到行尾 Shift+Home:选择从行首到光标处 Ctrl+Shift+L:选中所有匹配 Ctrl+D:选中匹配 Ctrl+U:光标回退

项目目录显示的是当前项目的一些细节情况,包括图标、appid、目录信息等等 点击预览功能,工具会自动编译和构建代码,并生成代码包上传到微信服务器,成功后将会显示一个二维码,开发者用新版微信扫描二维码即在手机上看到相应项目的真实表现

需要注意的是,内测阶段,代码上传 功能仅管理员微信号可操作可在手机上看到相应项目的真实表现

 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22956.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询