• 微信小程序


    小程序简介

    小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

    目录结构

    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

    一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

    文件 必需 作用
    app.js 小程序逻辑
    app.json 小程序公共配置
    app.wxss 小程序公共样式表

    一个小程序页面由四个文件组成,分别是:

    文件类型 必需 作用
    js 页面逻辑
    wxml 页面结构
    json 页面配置
    wxss 页面样式表

    小程序配置

    全局配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

    完整配置项说明请参考小程序全局配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

    以下是一个包含了部分常用配置选项的 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"
      ]
    }
    

    页面配置

    每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
    完整配置项说明请参考 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
    例如:

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

    小程序组件

    小程序For 循环

    wx:for = "变量" 小程序循环 item为微信封装的

    <view wx:for="{{students}}">{{item.name}}-{{item.age}} </view>
    

    获取用户信息

    .wxml
    <button size="mini" open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" >获取</button>
    .js
      handleGetUserInfo(event){
        console.log(event)
      },
    

    open-data 组件

    type 的合法值

    说明 最低版本
    groupName 拉取群名称 1.4.0
    userNickName 用户昵称 1.9.90
    userAvatarUrl 用户头像 1.9.90
    userGender 用户性别 1.9.90
    userCity 用户所在城市 1.9.90
    userProvince 用户所在省份 1.9.90
    userCountry 用户所在国家 1.9.90
    userLanguage 用户的语言 1.9.90

    wxss 尺寸单位

    rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
    如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
    Phone5 1rpx = 0.42px 1px = 2.34rpx
    iPhone6 1rpx = 0.5px 1px = 2rpx
    iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

    wxss 导入样式

    @import '路径';
    @import 'app.wxss';

    时间运用

    .wxml

    <view>{{nowTime}}</view>
    .js
      data: {
        nowTime: new Date().toLocaleString()
      },
      onLoad: function (options) {
        setInterval(() =>{
          this.setData({
            nowTime: new Date().toLocaleString()
          })
        },1000)
      },
    

    判断运算

    ? 成立 : 不成立
    {{age >= 18 ? '成年人': '未成年人'}}

    内容隐藏

     <view wx:if="{{false}}">哈哈哈</view>
     hidden 隐藏的组件时存在的 相当与display : no
     <view hidden='{{true}}'>呵呵</view>
    

    带变量的模板

    <template name="模板名">
      <button size="mini">{{btntext}}</button>
    </template>
    
    <template is="模板名" data="{{btntext: '按钮'}}"></template>
    

    可通过模板路径导入(import 不可逐级导入)
    绝对路径

    <import  src="/templates/button.wxml"/>
    

    相对路径

    <import  src="../../templates/button.wxml"/>
    
    <include /> (也可以导入 相当与拷贝.wxml文件) (可逐级循环导入 类似时 父文件 导入 --> 子文件 也可以导入 --> 子文件)
    <include src="/templates/button.wxml" />
    
  • 相关阅读:
    内存对齐
    C++中构造函数
    计算机视觉领域的大牛主页
    各种银行卡的收费情况
    常识
    毕业生必须知道
    计算机视觉领域资料
    人际关系
    生活常识
    可使用在项目的web gantt甘特图有哪些?
  • 原文地址:https://www.cnblogs.com/Alicebat/p/12172421.html
Copyright © 2020-2023  润新知