zoukankan      html  css  js  c++  java
  • 微信小程序

    微信小程序

      小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

    需要的技术

    """
    
    1、html
    
    2、css
    
    3、js
    
    4、如何创建小程序
    
    5、小程序的数据绑定
    
    6、列表渲染
    
    7、小程序组件的使用
    
    8、小程序内置的API
    
    9、基于Python后端语言实现api接口
    
    
    """

    小程序的基础

    简介

      小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,

    用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

    主要的功能

      小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中,通过公众号关联,用户可以实现公众号与小程序之间相互跳转。

    开发环境的准备

    1、注册账号

    2、获取AppID

    在官网用邮箱注册微信小程序账号,点击开发模式,获取AppID成为开发者。

    登录后可以看到以下界面,点击开发设置

     获取AppID,复制粘贴到开发工具中填写。

     下载好开发者工具后新建项目,界面如下:

     创建好项目后,主页面结构显示。

    工具栏

     调节测试

    调试器

    和浏览器中的F12,右键检查一样查看后台控制。

     小程序结构目录

    1、小程序文件结构和传统的web对比

    基本的项目目录

     配置介绍

      一个小程序应用程序会包含最基本的两种配置文件,一种是全局的app,json和页面自己的page.json.

    注:配置文件中不能出现注释

    全局配置app.json,新建项目自带的配置。

     page字段---用于描述当前小程序所有页面路径,这是为了让微信客户端直到当前的小程序页面定义在那个目录下。

    window字段--定义小程序所有页面的顶部背景颜色,文字颜色定义等。

    全局配置,以下包含了部分常用配置选项的app,json

    {
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true,
      "navigateToMiniProgramAppIdList": [
        "wxe5f52902cf4de896"
      ]
    }
    完整配置项说明请参考小程序全局配置
    页面
    

     页面配置

    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }  

    常用的参数

     视图层

      WXML(weixin markup language)是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构。

    数据的绑定

    <view>{{message}}</view>
    page({
       data:{
          message:"Just  do It "
    }
    })

    组件属性

    <view id="item-{{id}}"> </view>
    page({
        data: {
            id:0
        }
    
    })        

    bool类型

      注:不能直接写checked="false",其计算结果是一个字符串。

    <checkbox cheched="{{false}}"> </checkbox>

    运算

    三元表达式

    <view hidden="{{flag ? true : false}}"> Hidden </view>

    算数运算

    <view> {{a+b}} + {{c}} +d </view>
    page({
         data:{
         a=1,
         b=2,
         c=3
    }
    
    })

    逻辑判断

    <view wx:if="{{length >5 }}"> </view>

    字符串的运算

    <view>{{"hello" + name}} </view>
    page({
    
    data:{
    
       name:"word"
    
    }
    
    })

    for循环

    项的变量默认为:item  wx:for-item,可以指定当前元素的变量名

    下标变量名默认为 index  wx:for-index  可以指定数组当前下标的变量名

    <view> wx:for="{{arrary}}"
        {{index}}:{{item.message}}
    </view>

    if 判断

      在框架中,使用wx:if="{{condition}}" 来判断是否需要渲染改代码块

    <view wx:if="{{condition}}">True</view>

    wxss样式文件

     1、尺寸单位

     2、样式导入

    尺寸单位:rpx:可以根据屏幕宽度进行自适应,规定屏幕为750rpx.

    样式导入

      使用@inport 语句可以导入外联样式表,@import后跟需要导入的外联样式。

    /* common.wxss */
    .small-p{
      padding: 5px;
    }

    外联使用

    /* app.wxss */
    @import "common.wxss";
    .middle-p{
      padding:15[px]
    }

    选择器

    目前常用的选择器

     小程序的双线模型

    小程序的启动流程

    页面的生命周期

    基本的组件

    1、view,类div标签

     2、text

      显示普通的文本text只能嵌套text

     代码

    <text selectable="{{false}}" decode="{{false}}">
        普通&nbsp;
    </text>

    3、swiper

      微信内置有轮播图组件

    4、video

      视频,该组件是原生组件,使用时请注意相关限制。

     事件

    常见的事件有:

     currentTarget和target的区别

     事件捕获与冒泡事件

    事件捕获是从外到内的

     组织事件捕获

      用关键字catch组织事件捕获

    分析

    自定义组件

      自定义组件的方式来实现构建页面

    1、创建自定义组件

      一个自定义组件由json wxml wxss js 4个文件组成

    2、声明组件

      首先需要在json文件中进行自定义组件声明

    {
    "component":true
    }

     

  • 相关阅读:
    POJ 3660 Cow Contest (floyd求联通关系)
    POJ 3660 Cow Contest (最短路dijkstra)
    POJ 1860 Currency Exchange (bellman-ford判负环)
    POJ 3268 Silver Cow Party (最短路dijkstra)
    POJ 1679 The Unique MST (最小生成树)
    POJ 3026 Borg Maze (最小生成树)
    HDU 4891 The Great Pan (模拟)
    HDU 4950 Monster (水题)
    URAL 2040 Palindromes and Super Abilities 2 (回文自动机)
    URAL 2037 Richness of binary words (回文子串,找规律)
  • 原文地址:https://www.cnblogs.com/Gaimo/p/11792795.html
Copyright © 2011-2022 走看看