草庐IT

保姆级教程:写出自己的移动应用和小程序(篇四)

火爆的小茶壶 2023-03-28 原文
上期文章我们主要学习了如何在自己的 iOS 或 Android 应用中引入第三方 SDK。随着引入 SDK 文章结束,关于应用开发入门系列的文章也就结束了。

那么今天,我们将会开始学习小程序的开发入门,看看如何在小程序中写出属于自己的 Hello World。

一、什么是 FinClip 小程序

我们平时接触最多的可能是微信小程序,例如大家比较常用的微信乘车码、肯德基自助点单、顺丰速运、腾讯文档等小程序。其体积小、用完即走、有着媲美原生 App 体验的同时,也给大家的生活工作提供了很大便利。这源于小程序提供了一个简单、高效的应用开发框架、丰富的组件及 API,帮助开发者在 App 中开发具有原生体验的服务。

那么 FinClip 小程序与微信小程序之间有什么关系呢?简单来讲,FinClip 小程序是与微信小程序类似的技术平台,兼容微信小程序语法及常用 API,同时也可以为 App 提供构建自有小程序生态的能力。FinClip 小程序技术可以为您在应用中集成一套自有小程序平台,或者在已经集成 FinClip 小程序的平台中发布自研小程序。

本文将作为抛砖引玉,从小程序开发者角度来介绍小程序基本目录结构、使用语法,和在 FinClip 平台如何快速开发、上传一个简单小程序。更加详细的组件及 API 支持、SDK 集成方法等可以参考 FinClip 小程序文档中心。

二、申请小程序

首先访问 FinClip 小程序官网,注册并登录小程序管理后台,分别进入小程序管理 → 我的小程序 → 新增小程序,在填写小程序名称等基础信息后确定创建。

FinClip 首页

三、下载开发工具 FIDE

访问这个链接,下载并安装与当前系统对应版本的 IDE

四、展示小程序

完成 IDE 下载安装后打开 FIDE,添加或创建本地小程序工程,在 FIDE 中各流程如下图所示:

FIDE 首页

新建小程序截图

FIDE 中各部分截图

在开始编辑小程序代码之前,先来熟悉一下小程序的各种结构与配置说明吧。

1. 小程序目录结构

这是小程序最基本的目录结构,所有的小程序项目都是这个结构,在上面不断添加其他内容。

|- app.json
|- app.js
|- pages
|- index
|- index.fxml
|- index.js

这个结构分成两层:描述整体程序的顶层 App 脚本,以及描述各个页面的 page 脚本。

2. 项目配置文件 app.json

顶层的 app.json 文件用于整个项目的配置,对于所有页面都有效。

app.json 中有几个重要属性:

属性

类型

必填

描述

pages

string[]

页面路径列表

window

Object

全局的默认窗口表现

tabBar

Object

底部/顶部 tab 栏的表现

debug

boolean

是否开启 debug 模式,默认关闭

subpackages

Object[]

分包结构配置

usingComponents

Object

全局自定义组件配置

如何定义这些属性呢?示例代码如下:

{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light", // 下拉 loading 的样式,仅支持 dark / light
"navigationBarBackgroundColor": "#fff", // 导航栏的颜色
"navigationBarTitleText": "首页", // 导航栏的文字,默认为空。
"navigationBarTextStyle": "black" // 导航栏的文字颜色,只支持black(黑色)或white(白色),默认为white。
},
"debug": true
}

3. 小程序初始化文件 app.js

这个文件用于对整个小程序进行初始化。

app.js 文件只需要执行一个函数 App({/* 参数 */}),主要参数如下表,参数均可选。

属性

类型

描述

触发时机

onLaunch

Function

生命周期回调—监听小程序初始化

小程序初始化完成时触发(全局只触发一次)

onShow

Function

生命周期回调—监听小程序显示

小程序启动,或从后台进入前台显示时触发

onHide

Function

生命周期回调—监听小程序隐藏

小程序从前台进入后台时触发

onError

Function

错误监听函数

当小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息

onPageNotFound

Function

页面不存在监听函数

小程序要打开的页面不存在时触发,会带上页面信息回调该函数

其他

不限制

开发者可自由添加任意的 function 或数据到 Object 参数中,用this 可访问


示例代码如下:

App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
globalData: {
userInfo: null
}
})

4. 页面文件 index.js

页面 js 文件负责初始化页面实例,配置当前页面的行为属性。

同样,页面 js 文件只需要执行一个函数 Page({/* 参数 */}),主要参数如下表,参数均可选。

属性

类型

描述

data

Object

页面的初始数据

onLoad

Function

生命周期回调—页面加载时触发

onShow

Function

生命周期回调—监听页面显示

onReady

Function

生命周期回调—监听页面初次渲染完成

onHide

Function

生命周期回调—监听页面隐藏

onUnload

Function

生命周期回调—监听页面卸载

onPullDownRefresh

Function

触发下拉刷新时执行

onReachBottom

Function

页面触底时执行

onShareAppMessage

Function

转发

onPageScroll

Function

页面滚动触发事件的处理函数

onTabItemTap

Function

当前是 tab 页时,点击 tab 时触发

其他

Any

开发者可以添加任意的函数或数据到 Object 参数中,在本页面的函数中用 this 可以访问

示例代码如下:

Page({
data: {
motto: 'Hello World'
},
onLoad() {

}
})

5. 页面文件 index.fxml

页面 fxml 文件用于描述小程序的页面,类似 HTML 语言。

示例代码如下:

<view class="container">
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

上面的代码用到了两个标签:和。

标签表示一个区块,用于跟其他区块分隔,类似 HTML 语言的

五、预览小程序

首先我们需要下载 FinClip App,你可以打开官网或者扫描下面的二维码。

编辑切换为居中

添加图片注释,不超过 140 字(可选)

下载完毕后,使用第二步注册的 FinClip 开发者账号登陆 FIDE 和 FinClip App

同时支持账密或短信登录

点击预览按钮生成小程序二维码,然后使用 FinClip App 扫码体验即可。

点击这里的预览

打开 FinClip App 后,点击右上角即可扫码预览

六、上传小程序

上传小程序的流程比较简单,点击上传按钮,选择第二步创建的小程序 ID,输入版本号及版本说明即可。

点击顶部的上传按钮

输入对应的版本号和发布说明

最终会看到上传成功的提示

此时再次进入 FinClip 小程序管理后台,找到新创建的小程序进入详情页,新增审核版,选择最新上传的小程序版本提交审核。待审核通过后可以上架该版本,点击展示线上版二维码可使用 FinClip App 扫码体验。

选择对应的小程序,查看详情

点击此处新增审核

选择对应的小程序版本

提交后会看到审核提交的提示

审核通过,可以点击这里进行版本上架

点击上架后就会出现在这里

七、小程序的开发 tips

在开发小程序的过程中,还有很多开发者须知的小技巧,我们也在这里做一并的汇总讲解。

1. 如何在 FinClip App 中打开 vconsole

只需要在小程序的 app.json 中添加字段: "debug": true 即可

添加即可

2. 如何在 FIDE 中使用小程序自定义 API 功能

自定义 API 主要有以下 2 个使用场景:

  1. 自定义 API 调试 Mock
  2. H5 调用的原生API Mock
在默认情况下,IDE 对于自定义的 API 会默认返回 Fail: 未实现该 API ,而一些小程序业务流程可能会依赖自定义 API。

所以 IDE 对于客户提供 API Mock 的机制,可以自定义 SDK 返回的结果,这样便可以在 IDE中 走通业务这些业务流程。

基础用法

入口在右下角调试面板中的 Mock 标签

先点击 Mock 再点击加号

1.原生小程序内使用自定义 API 规则示例

自定义 API,在小程序根目录 FinClipConf.js 文件配置如下:

module.exports = {
extApi:[
{ //普通交互API
name: 'customEvent', //扩展api名 该api必须Native方实现了
params: { //扩展api 的参数格式,可以只列必须的属性
url: ''
}
}
]
}

在小程序中运行 ft.customEvent,可以取到 Mock 结果:

2. web-view 中使用自定义 API 规则示例

在 H5 页面中引入桥接 ​​js-sdk​​ 文件后,即可调用下面的注册的方法了。

HTML 内调用注册的方法示例:

window.FinChatJSBridge.invoke('customEvent', {url:'getLocation'}, (result) => {
console.log(result)
});


本期教程讲解了基于 FinClip进行小程序开发与调试,上传的全部流程介绍。

在下一期的文章中,我们将会一起聊聊如何编辑小程序的 CSS 样式与服务调用的相关信息,敬请期待。


有关保姆级教程:写出自己的移动应用和小程序(篇四)的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  3. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容?我基本上想做类似numbers.slice(0,3)的事情,但要删除切片中的数组项。嗯...嗯,我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组,我们在StackOverflow上找到一

  4. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  5. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  6. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  7. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  8. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  9. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  10. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时,API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名,以便它在GitHub上正确呈现。更好的是,我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作?是否有某个地方可以查找可以修改的主页文件的名称?还是我必须编写一个新的Rake任务?额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么?为什么不只有一个?

随机推荐