zoukankan      html  css  js  c++  java
  • 小程序开发

    开发流程:

    1. 申请账号
    2. 下载安装开发者工具
    3. 熟悉默认demo
    4. 代码构成:JSON,WXML,WXSS,JS
    5. 小程序能力:
    -- 启动:微信客户端下载小程序代码-根据配置启动加载app.json中pages的第一个页面--启动后回调执行app.js中App实例的onLaunch。
    -- 程序和页面:加载一个页面,首先加载json配置, 在加载wxml,wxss,最后加载js,结合js中的data数据进行渲染,渲染完成后执行onLoad回调。
    -- 组件:微信提供的各种样式组件,如:view,swiper,text,input,navigator,image,map,canvas等。
    -- API: 提供微信本身能力的一些接口,如:获取微信用户信息,微信支付,获取地理位置,扫一扫等。
    注:启动先后顺序为onLaunch(app)-onShow(app)-onLoad(index)-onShow(index)-onReady(index)
    onUnload: 返回和redirectTo触发
    onHide: navigationTo触发
    6. 构思设计/开发/预览/发布/运营

    组件:

    视图容器:view, swiper, scroll-view, movable-view, cover-view;
    基础内容:text, icon, rich-text, progress;
    表单组件:input, label, checkbox, radio, button, form, picker, picker-view, slider, switch, textarea;
    导航:navigator;
    媒体组件:audio, image, video, camera, live-player, live-pusher;
    地图:map;
    画布:canvas;
    开放能力:open-data, web-view;

    API:

    网络:发起请求、上传下载、WebSocket
    
    媒体:图片、录音、录音管理、音频播放控制、音乐播放控制、背景音频播放管理、音频组件控制、视频、视频组件控制、相机组件控制、实时音视频
    
    文件:文件的获取、存储、打开、删除
    
    数据缓存:缓存的设置、获取、移除、清空
    
    位置:获取位置、查看位置、地图组件控制
    
    设备:系统信息、网络状态、加速度计、罗盘、拨打电话、扫码、剪贴板、蓝牙、iBeacon、屏幕亮度、用户截屏事件、振动、手机联系人、NFC、Wi-Fi
    
    界面:交互反馈、设置导航条、设置tabBar、设置置顶信息、导航、动画、位置、绘图、下拉刷新、WXML节点信息、WXML节点布局相交状态
    
    第三方平台:获取配置信息
    
    开放接口:登陆、授权、用户信息、微信支付、模板消息、客服消息、转发、获取二维码、收货地址、卡卷、设置、微信运动、打开小程序、打开APP、获取发票抬头、生物认证、附近、插件管理
    
    数据:常规分析、自定义分析
    
    更新:版本更新管理
    
    多线程:创建多线程程序
    
    调试接口:打开/关闭调试

     JSON配置:

    app.json: 当前小程序全局配置,包括了小程序的所有页面路径,界面表现,网络超时,底部tab等。
    project.config.json: 开发者工具的个性化配置文件,修改工具的颜色,编译方式等都会写入这个文件。
    page.json: 每个页面的属性配置

      JSON:
      -- json文件不支持注释
      -- json文件使用双引号

    WXML模板:

    1. 类似HTML,只是打包成了常用的组件
    2. 不直接操作DOM,进行了状态管理,即使用了wx:if,{{}}等模板表达式

      WXML:
      -- 数据绑定:通过{{变量名}}绑定到内容或属性
      -- 逻辑语法:三元运算,算数运算,字符串拼接,直接置入(数字,字符串,数组)
      -- 条件列表:wx:if,elif,else | wx:for,wx:for-index,wx:for-item | block标签 | wx:key="property/*this"当标签节点变化时保持原有标签状态随着变化
      -- 模板引用:template | import(只引入template) / include(只引入template之外的)
      -- 共同属性:id, class, style, hidden, data-*, bind*/catch*

    WXSS样式:

    类似CSS,做了一些修改
    -- 新增了尺寸单位:rpx
    -- 提供了全局样式,和局部样式
    -- WXSS仅支持部分CSS选择器

      WXSS:
      -- 文件组成:项目公共样式,页面样式,其他样式
      -- 样式的引用:@import './test_0_wxss'
      -- 尺寸单位:rpx, 宽度为375物理像素屏幕下1rpx=375/750=0.5px, iphone6:1rpx=0.5px
      -- 内联样式:与web网页一样,但可以使用变量
      -- 选择器:类、id、元素、伪元素(::after,::before),权重:!important>style>#id>.class>element
      -- 样式库:https://github.com/Tencent/weui-wxss

    WXS:

    小程序的一套脚本语言

    JS交互逻辑:

    与用户交互:响应用户点击,获取用户位置等

      JAVASCRIPT:
      -- ECMAScript:ECMAScript+小程序框架+小程序API
      -- 执行环境: ES6,ES5
      -- 模块化: module.export,require
      -- 脚本的执行顺序: app.js,根据app.json中顺序的pages.json
      -- 作用域:文件独立该文件声明的变量只在该文件中有效,全局:使用getApp()获得实例给她赋值,会存在先后顺序,或者直接在app.js中添加全局变量

     其他:

    -- backgroundTextStyle: 下拉文字背景色,只支持black/light
    -- 在app.json中添加页面,会自动创建wxml等文件
  • 相关阅读:
    jar包和war包的介绍和区别
    java中getAttribute和getParameter的区别
    修改tomcat默认的编码方式
    jQuery遮罩插件jQuery.blockUI.js简介
    Sql Server 2008 Management studio安装教程
    评论字数限制和字数显示
    如何将表单元素封装
    DWR原理探秘
    linux命令详解:pgrep命令
    使用Nginx实现灰度发布
  • 原文地址:https://www.cnblogs.com/maoriaty/p/8478139.html
Copyright © 2011-2022 走看看