码迷,mamicode.com
首页 > 微信 > 详细

小程序初始认识

时间:2019-11-09 12:14:21      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:rbac   div   样式   标签   launch   组件   代码   opera   加载   

我的第一个小程序


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/

小程序初始认识

标签:rbac   div   样式   标签   launch   组件   代码   opera   加载   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/11824426.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!