小程序初始认识

zhangwang 发布于2019-08-02 11:48 / 2940人阅读

摘要：仅支持部分选择器交互交互逻辑与类似，此外还有丰富的小程序。中的是一个页面构造器，通过它，结合小程序框架把和一起渲染出最终的结构。

我的第一个小程序

1.首先搭建小程序所需环境，在微信公众平台上按照起步，申请账号、登记信息、获取到AppID接着安装开发工具，我安装的是v1.02.1810250版。
打开后出现了“初始化失败，请使用 2.2.3 或以上的基础库以使用云能力”的报错。这时打开左上角工具栏中的设置-->点击项目设置-->调试基础库到2.2.3 即可。

接着又出现了 cloud init error: {errmsg: "operatewxdata:fail invalid scope"的报错，解决方法为点击上方的云开发--->开通云服务--->右键项目名，绑定当前环境

2.代码构成

app.json:是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等,我的QuickStart 项目里边的初始 app.json 配置内容如下：

{
  "pages": [
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  }
}

其中：
pages---用于描述当前小程序所有页面的路径，让用户指导此小程序页面定义在那个目录；
window ---定义小程序所有页面的顶部背景颜色，文字颜色定义等

project.config.json
用于记录开发工具的配置，在更换电脑时，载入项目文件即可恢复原有的配置。

**.json
用来定制每个页面的样式都有的配置文件，属性如下：

WXML 模板
充当的类似 HTML 的角色，但有一些不同：
1).比起传统的html代码，WXML已经封装了许多的组件，不需要用div、span等标签来组成，而常用view、button、text等包装好的组件。
2).使用到类似VUE的MVVM开发模式，JS只需要管理状态，通过模板语法来描述状态和界面结构关系。

WXSS样式
具有CSS的大部分特性，同事有一些扩充和修改。
1).新增了尺寸单位rpx，可免去换算手机设备的不同宽度和像素比。
2).提供了全局样式app.wxss,和局部页面样式**.wxss。
3).仅支持部分选择器：

JS交互
交互逻辑与VUE类似，此外还有丰富的小程序API。

3.小程序的运行机制

小程序的启动
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地，通过app.json的pages中的第一个页面路径就是小程序的首页了，通过小程序底层的一些机制，就可以渲染出这个首页。小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

    App({
      onLaunch: function () {
        // 小程序启动之后 触发
      }
    })

程序与页面
每一个页面包含四个文件，.json配置生成一个小程序的格式框，顶部的字体和颜色在这里定义，然后装载.WXML和WXSS样式，最后加载.JS。JS中的Page是一个页面构造器，通过它，结合小程序框架把data和index.html一起渲染出最终的结构。渲染之后，在onLoad的回调函数中处理你的逻辑。

  [1]: https://developers.weixin.qq.com/miniprogram/dev/

GPU云服务器云服务器小程序小程序小程序附近小程序门店小程序小程序小程序打开小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53132.html

小程序初始认识

摘要：仅支持部分选择器交互交互逻辑与类似，此外还有丰富的小程序。中的是一个页面构造器，通过它，结合小程序框架把和一起渲染出最终的结构。我的第一个小程序 1.首先搭建小程序所需环境，在微信公众平台上按照起步，申请账号、登记信息、获取到AppID接着安装开发工具，我安装的是v1.02.1810250版。打开后出现了初始化失败，请使用 2.2.3 或以上的基础库以使用云能力的报错。这时打开左...

forrest23 2019-08-29 17:05 评论0 收藏0
小程序初始认识

摘要：仅支持部分选择器交互交互逻辑与类似，此外还有丰富的小程序。中的是一个页面构造器，通过它，结合小程序框架把和一起渲染出最终的结构。我的第一个小程序 1.首先搭建小程序所需环境，在微信公众平台上按照起步，申请账号、登记信息、获取到AppID接着安装开发工具，我安装的是v1.02.1810250版。打开后出现了初始化失败，请使用 2.2.3 或以上的基础库以使用云能力的报错。这时打开左...

wapeyang 2019-08-23 12:33 评论0 收藏0
Day 2: AngularJS —— 对AngularJS的初步认识

摘要：开始使用现在创建一个名为的文件，它将会是一个基于的网上书店应用。这将初始化应用程序，并告诉要在这一部分活跃。将为每个元素增加元素。控制器和视图之间的粘合剂，而且会注入到。现在我们添加书籍数组的对象到对象，这个对象对视图是可见的。编者注：我们发现了比较有趣的系列文章《30天学习30种新技术》，准备翻译，一天一篇更新，年终礼包。以下是第二天技术的译文。昨晚我完爆了一天一技术的任务...

joyqi 2019-08-19 14:24 评论0 收藏0
第一篇--认识Jmeter

摘要：为了最大限度的灵活性，允许使用正则表达式创建断言。线程组理解一个虚拟用户组，线程组内线程数量在运行过程中不会发生改变。测试执行后操作，即线程组执行完成后执行的内容。 Jmeter是Apache组织开发的基于Java的压力测试工具，它最初被设计用于Web应用测试，但后来扩展到其他测试领域。它可以用于测试静态和动态资源，例如静态文件、Java 小服务程序、CGI 脚本、Java 对象、数...

张宪坤 2019-08-15 12:07 评论0 收藏0
小程序使用之自定义组件

摘要：今天要介绍的是小程序的自定义组件，类似的在做开发的过程中会用到自定义，封装成通用的组件可以在不同页面里重复使用可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章小程序使用之WXS中，介绍了关于 wxs 的使用，通过wxs处理数据再渲染到view层，可以简...

Ververica 2019-08-02 12:09 评论0 收藏0