Python_小程序

一、开发前的准备工作

　　1.申请AppID：一个账号对应一个小程序，个人/个体只能申请5个小程序

　　2.下载开发工具

二、小程序的文件结构

三、

　　1.数据绑定

　　　　1.1数据的设置

Page(
    data:{
        name:'name',
        age:18
    }
)

page.js的内容

　　　　1.2数据的调用

<view>{{name}}</view>
<view>{{age}}</view>

page.wxml

　　2.列表的渲染

　　　　2.1数据的设置

Page(
    data:{
        stundents:[
        {id:1,name:'alxes',age:11},
        {id:2,name:'alxes',age:12},
        {id:3,name:'alxes',age:13}
        ]
    }
)

page.js

　　　　2.2数据的调用

<view wx:for="{{stundents}}">{{item.id}}{{item.name}}item.age</view>

page.wxml

　　除了item之外，还有index内置的参数，标识条目的位置

　　3.事件的监控

　　　　3.1事件的定义

Page(
    data:{
        counter:0
    }
    handleEvent(){
        this.setDate({
            counter:this.data.counter+1
        })
    }
)

page.js

　　　　3.2事件的引用

<button bindtap='handleEvent'>按钮</button>

四、小程序的配置

　　1.project.config.json：项目配置文件，比如项目名称，appid

　　2.sitemap.json：小程序搜索相关

　　3.app.json：全局配置，参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

属性	类型	必填	描述
pages	string[]	是	页面路径列表
window	Object	否	全局默认窗口表现
tabBar	Object	否	底部tab栏表现，底部导航栏

　　　　3.1tabBar设置　

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/img/sy.jpg",
        "selectedIconPath": "/img/sy_active.jpg"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "首页",
        "iconPath": "/img/fl.jpg",
        "selectedIconPath": "/img/fl_active.jpg"
      }
    ]
  }

底部分页栏

　　4.page.json：页面配置

　　　　页面中的配置选项回覆盖app.json中的windows中相同的配置选项

五、页面的生命周期（.js文件中）

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

生命周期示例

六、基本组件介绍

　　1.text组件

 1 <view>
 2 <!-- 1.基本使用 -->
 3 <text>文本组件</text>
 4 </view>
 5  <view>
 6  <!-- 2.selectable属性，文本是否可选。默认false -->
 7 <text selectable="{{ture}}">文本可以被选择</text>
 8  </view>
 9 <view>
10 <!-- 3.spaces属性，显示连续空格 -->
11 <text space="enap">中文字 符空格一半大小</text>
12 <text space="emsp">中文字 符空格大小</text>
13 <text space="nbsp">根据字 体设置的空格大小</text>
14 </view>
15 <view>
16 <!-- 4.decode,是否解码,默认false -->
17 <text decode="{{ture}}">是否解码</text>
18 </view>

使用说明

　　2.button组件

<!-- 1.button的基本使用 -->
<button>这是个按钮</button>
<!-- 2.size属性， 建议使用mini-->
<button size="mini">mini属性的按钮</button>
<!-- 3.type属性 -->
<button size="mini" type="primary">primary属性的按钮</button>
<button size="mini" type="default">default属性的按钮</button>
<button size="mini" type="warn">warn属性的按钮</button>
<!-- 4.plain，镂空效果 -->
<button size="mini" plain>plain属性的按钮</button>
<!-- 5.disalbe：不可用 -->
<button size="mini" disalbe>disalbe属性的按钮</button>

使用说明

　　3.view组件

　　　　参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

　　4.img组件

<!-- 1.基本使用
        1.1组件有默认的大小320*240
        1.2有一个行内块级元素（inline-bolck）
 -->
<image></image>
<!-- scr属性，本地路径（相对路径/绝对路径）/ 远程地址 -->
<image src="/img/flk.jpg"></image>
<image src="网络地址"></image>
<!-- 相册中的图片 -->
<button bindtap="handleChooseAlbum">选中图片</button>

基本使用

  data: {
    imagePath:''
  },

  handleChooseAlbum(){
    //系统API，让用户在相册中选择图片或拍照
    wx.chooseImage({
      success: (res) =>  {
        //路径
        const path = res.tempFilePaths[0]
        this.setData({
          imagePath : path
        })
      },
    })
  }

相册功能

　　　　参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

　　5.input组件：输入框

　　　　参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

　　6.scroll-view组件　　　　

<!-- 水平滚动 -->
<scroll-view class="container1" scroll-x>
  <view wx:for="{{10}}" class=".item1">{{item}}</view>
</scroll-view>

 <!-- 垂直滚动 -->
 <scroll-view class="container2" scroll-y>
  <view wx:for="{{10}}" class=".item2">{{item}}</view>
</scroll-view>

设置方法wxml文件

/* 设置横向滑动 */
.contailner1{
  background: purple;
  white-space: nowrap;
}
.item1{
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  display: inline-block;
}

/* 设置竖向滑动 */
.contailner2{
  background: orange;
  height: 200px;
  margin-top: 20px;
}
.item2{
  height: 100px;
  background: blue;
  margin:10px;
}

样式设置方法wxss文件

　　　　参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

七、共同属性

属性	描述	注释
id	组件的唯一标识	整个页面的唯一标识
class	组件的样式表	在对应的wxss中定义的样式表
style	组件的内联样式	可以动态设置内联样式
hidden	组件是否显示	所有组件默认显示
data-*	自定义属性	组件上触发的事件十，会发送给事件处理的函数
bind*/cath*	组件的事件

八、支持的选择器

九、wxss的尺寸单位

　　1.使用rpx，可根据屏幕宽度进行自适应，建议做布局设置以iPhone6为实例。

十、引入wxss文件的方法

　　@import '引入文件的路径';

十一、官方样式库

　　https://github.com/Tencent/weui-wxss

十二、must语法

　　1.引入变量 {{message}}

　　2.变量判断{{age >=18 ? '成年人' : '未成年人'}}

　　3.bloot变量判断<view class ='box {{isActive ? "active" : ""}}'>哈哈</view>

　　　　　　　　　isActive : false

十三、条件判断

<!-- wx:if 的使用 -->
<view wx:if ="{{isShow}}">ha</view>
<!-- wx:else/wx:elif -->
<view wx:if="{{ score >= 90 }}">优秀</view>
<view wx:elif="{{ score >= 80 }}">l良好</view>
<view wx:elif="{{ score >= 60 }}">及格</view>
<view wx:else>及格</view>

代码实例

　　在某些情况下，我们需要使用wx:if或者wx:for是，可能需要包裹一组组件标签，这时候需要使用block标签，block不是组就按，仅用来包装元素

<view wx:for="{{movies}}">
  <view>电影序号:{{index}}</view>
  <view>电影名称:{{item}}</view>
</view>

<block wx:for="{{movies}}">
  <view>电影序号:{{index}}</view>
  <view>电影名称:{{item}}</view>
</block>

代码示例

　　item、index起名字

<view wx:for="{{movies}}" wx:for-item="movie1" wx:for-indexx="i" >{{movie1}}-{{i}}</view>

十四、模板的使用

<!-- 设置 -->
<template name="contenItem">
  <button size='mini'>哈哈</button>
  <view>哈哈1</view>
</template>

<!-- 引用 ,-->
<template is="contenItem"/>
<!-- 引入文件 -->
<import scr="路径"/>

<!-- 传参数 -->
<template is="contenItem" data="{{btntex:'a',content:'e'}}"/>

示例

十五、wxs

<!-- wxs的定义方式 -->
<wxs module="info">
  // JS代码
  var message = "hello word";
  var name = "coderwhy";

  var sum = function(num1,num2){
    return num1 + num2
  }
  //模块数据导出
  module.exports = {
    message : message
    name : name
    sum : sum
  }

<!-- 导入方法 -->
<wxs src="路径" module="info"/>

<!-- 引入方法 -->
<view>{{info.message}}</view>
<view>{{info.name}}</view>
<view>{{sum(20,30)}}</view>

示例

十六、常见的事件类型

　　input : bindinput bindblur bindfocus

　　scroll-view : bindscrolltowpper/bindscrolltolower

　　1.比较常见的事件类型

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms在离开，如果指定了事件回调函数，并触发这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms在离开

　　2.事件对象

属性	说明
type	事件类型
timeStamp	页面打开到触发事件所经过的毫秒数
target	触发事件的组件的一些属性值组合
currentTarget	当前组件的一些属性值集合
detail	额外的信息
touches	触摸事件，当前停留在屏幕中触摸点信息的数组
changedTouches	触摸事件，当前变化的触摸点信息的数组

　　3.事件冒泡和事件捕获

　　　　3.1 bind一层层传递

　　　　3.2 catch 阻止事件进一步传递

十九、自定义组件

　　自定义组件同样是由4个文件组成，建立一个公共的目录，使用自定义组件　　

 1 <!-- 使用自定义组件，wxml文件中 -->
 2 <my-cpn></my-cpn>
 3 <!-- 在json文件中，注册组件 -->
 4 {
 5   "usingComponents": {
 6       "my-cpn":"路径"
 7   }
 8 }
 9 <!--组件中传递数据 -->
10 <!-- 在组件js文件中 -->
11 Component({
12    properties:{
13         title:{
14              type:String,
15              value:'默认值'
16           }
17      }
18 })
19 <!-- 在wxml文件中 -->
20 <my-cpn titile='哈哈'></my-cpn>    

组件的使用方法

1.组件传递样式
Component({
   externalClasses:['titileclass']
})
引用

组件传递内容

组件传递方法

组件修改数据

二十、插槽

　　插槽同样是4个文件组成，使用slot标签

<!-- 插槽的定义 -->
<view><slot name='slot1'></view>
<view><slot name='slot2'></view>
<view><slot name='slot3'></view>

槽的定义

　　同样插槽需要注册，才可以引用，注意需要在插槽的js文件中，引入下列内容

Component({
    options:{
          multipleSlots : true
     }
})

插槽的js文件中引入

二十一、Component构造器

　　properties：定义传入的属性

　　data：定义内部属性

　　methods：定义方法

　　options：额外配置选项

　　externalClasses：引入外部样式

　　observers：属性和数据监听

　　pageLifetimes：页面生命周期

　　lefetimes：组件生命周期

二十二、网络请求

　　wx.request封装

二十三、展示弹窗API

　　showToast

　　showModal

　　showLoading

　　showActionSheet