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

    注册小程序

    邮箱必须是没有申请过公众号,服务号的邮箱

    小程序中的概念

    AppId: 小程序在微信官方服务器的唯一表示,相当于主键id,每个小程序的appid都不同
    
    AppSecret:小程序密钥,他是在调用微信接口时,需要传递的参数
    
    服务器域名:就是django程序的域名,域名的要求,必须是公网可以访问的https的域名
    

    小程序项目目录

    pages	所有的页面
    
    ​	-index	每一个文件夹代表着一个页面,每个页面都是由四个文件组成
    
    ​		-index.js		页面的js文件
    
    ​		-index.json		页面的配置文件
    
    ​		-index.wxml		页面的html文件
    
    ​		-index.wxss		页面的css文件
    
    utils		写公共方法的,可以不用
    
    app.js 		小程序项目的js,全局只有一个,全局的js文件,小程序的入口处
    
    app.json		小程序的全局配置文件
    
    app.wxss		小程序的全局css文件
    
    project.config.json		项目配置文件,不动
    
    sitemap.json		这个是小程序的seo文件
    

    小程序的全局配置app.json

    注意:配置文件中不支持注释
    {
        pages添加页面路由的,添加一个路由,就是添加一个页面,谁的路径在第一个谁就是首页
      "pages": [
        "pages/test/test",
        "pages/index/index",
        "pages/logs/logs"
        
      ],
        windows主要是配置下拉和头部,以navigation开头都是头部,如果要有下拉,必须enablePullDownRefresh把这个配置设置成true
      "window": {
        "backgroundTextStyle": "dark",
        "enablePullDownRefresh": true,
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "Python",
        "navigationBarTextStyle": "white" 
      },
        tabBar主要是配置页面下部的导航,显示顺序是和list里面的顺序一致,list里面至少要有两页,最多有五项
     "tabBar": {
       "color": "#ffffff",
       "selectedColor": "#FFB6C1",
       "backgroundColor": "#333",
       "borderStyle": "white",
    
       "list": [{
         "pagePath": "pages/index/index",
         "text": "index页面",
         "iconPath": "images/icon-2.png",
         "selectedIconPath": "images/icon-2-sed.png"
       },
       {
        "pagePath": "pages/test/test",
        "text": "test页面",
        "iconPath": "images/icon1.png",
        "selectedIconPath": "images/icon1-sed.png"
      }
       
       ]
     },
    
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }
    

    小程序的页面配置

    页面.json
    可以对app.json中的window进行覆盖,如果页面没有配置就走全局,页面配置了,就走页面,写法如下
    {
      "usingComponents": {},
      "navigationBarTitleText": "Python13"
    }
    

    小程序的数据绑定

    页面的js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        msg:'I am a handsome boy!',
        num: 12,
        name:"tank",
        num1:2,
        flag:false,
        name_list:[{"name":"godlover","hobby":"eat"},{"name":"godsee","hobby":"drink"}],
        color:"pink"
    
      },
    
    页面的.wxml文件和html文件性质一样
    
    页面引用js的数据是用{{}},也可以用作属性值
    <view id="item-{{msg}}">ttt  {{msg}}</view>
    <view> my age is {{num}}</view>
    
    如果都是字符串,{{name + msg}},就是拼接
    <view>{{name+msg}}</view>
    
    如果一个是字符串一个是数字也是拼接
    <view>{{name+num}}</view>
    
    如果都是数字,则是做运算
    <view>{{num-num1}}</view>
    
    数字做字符串分开来写
    <view>{{num}}+{{num1}}</view>
    
    在页面中如果属性想表达布尔值,一定要加{{}},当然也可以直接使用变量{{布尔值变量}}
    <checkbox checked="{{true}}"></checkbox>
    <checkbox checked="{{flag}}"></checkbox>
    
    条件判断语句
    <view wx:if = "{{num>11}}">I am a big man!</view>
    
    循环默认是用index -> 取键,item -> 取值,
    用wx:for-index --> 来修改取键的index
    用wx:for-item --> 来修改取值的item
    一般都要加上wx:key ="index"来提高遍历的速度
    <view wx:for = "{{name_list}}" wx:key="index">
    {{index}}:{{item.name}} ==> {{item.hobby}}
    </view>
    <view wx:for = "{{name_list}}" wx:for-index="k" wx:for-item="v" wx:key="index1">
    {{k}}:{{v.name}} >>> {{v.hobby}}
    </view>
    
    如果只想输出内容没不想要包裹的标签,用<block>标签做承载标签
    <block wx:for = "{{name_list}}" wx:key="index">
    {{index}}:{{item.name}} ==> {{item.hobby}}
    </block>
    
    
    

    小程序的wxss文件

    标签中和原生的html一样都有class和id,我们的样式写在wxss文件,和普通的css没有区别,只是用rpx来代替px,
    
    一般1prx等于0.5px
    
    

    wxml文件

    <view class="cls"></view>
    行内样式写法与原生的没有区别,可以调用变量来做属性
    <view style="color:red">bbb</view>
    <view style="color:{{color}}">aaa</view>
    

    wxss文件

    .cls{
      margin-top: 20px;
       400rpx;
      height: 400rpx;
      background-color: blue;
    }
    

    小程序的官方组件

    https://developers.weixin.qq.com/miniprogram/dev/component/view.html

  • 相关阅读:
    Splashtop :符合 HIPAA 标准的远程桌面软件
    学生如何在家中访问学校许可的软件
    Splashtop用于远程实验室的功能得到增强
    docker环境安装,镜像和容器常用命令
    vue-cli入门
    webpack快速入门
    Vue路由vue-router
    Vue组件化
    Vue指令
    Vue实例
  • 原文地址:https://www.cnblogs.com/godlover/p/12450525.html
Copyright © 2011-2022 走看看