Python_小程序

时间  2019-12-01
标签 python 程序 栏目 Python 繁體版
原文   原文链接

1、开发前的准备工做

　　1.申请AppID：一个帐号对应一个小程序，我的/个体只能申请5个小程序html

　　2.下载开发工具git

2、小程序的文件结构

3、

　　1.数据绑定github

　　　　1.1数据的设置json

Page(
    data:{
        name:'name',
        age:18
    }
)
page.js的内容

　　　　1.2数据的调用小程序

<view>{{name}}</view>
<view>{{age}}</view>
page.wxml

　　2.列表的渲染windows

　　　　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内置的参数，标识条目的位置app

　　3.事件的监控xss

　　　　3.1事件的定义

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

　　　　3.2事件的引用

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

4、小程序的配置

　　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中相同的配置选项

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

Page({

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

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

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

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

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
生命周期示例

6、基本组件介绍

　　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

7、共同属性

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

 8、支持的选择器

 

9、wxss的尺寸单位

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

10、引入wxss文件的方法

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

11、官方样式库

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

12、must语法

　　1.引入变量 {{message}}

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

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

　　　　　　　　　isActive : false

十3、条件判断

<!-- 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>

十4、模板的使用

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

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

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

十5、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>
示例

十6、常见的事件类型

　　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 阻止事件进一步传递

十9、自定义组件

　　自定义组件一样是由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'] 
})
引用
组件传递内容

组件传递方法

组件修改数据

 

二10、插槽

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

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

　　一样插槽须要注册，才能够引用，注意须要在插槽的js文件中，引入下列内容

Component({
    options:{
          multipleSlots : true
     }
})
插槽的js文件中引入

二11、Component构造器

　　properties：定义传入的属性

　　data：定义内部属性

　　methods：定义方法

　　options：额外配置选项

　　externalClasses：引入外部样式

　　observers：属性和数据监听

　　pageLifetimes：页面生命周期

　　lefetimes：组件生命周期

二12、网络请求

　　wx.request封装

 

 

二十3、展现弹窗API

　　showToast

　　showModal

　　showLoading

　　showActionSheet

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程