python 小程序-Python_小程序

一、开发前的准备工作

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

2.下载开发工具

二、小程序的文件结构

三、

1.数据绑定

1.1数据的设置

Page(

data:{

name:'name',

age:18}

)

page.js的内容

1.2数据的调用

{{name}}

{{age}}

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数据的调用

{{item.id}}{{item.name}}item.age

page.wxml

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

3.事件的监控

3.1事件的定义

Page(

data:{

counter:0}

handleEvent(){this.setDate({

counter:this.data.counter+1})

}

)

page.js

3.2事件的引用

按钮

四、小程序的配置

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

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

属性

类型

必填

描述

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

2

3 文本组件

4

5

6

7 文本可以被选择

8

9

10

11 中文字 符空格一半大小

12 中文字 符空格大小

13 根据字 体设置的空格大小

14

15

16

17 是否解码

18

使用说明

2.button组件

这是个按钮

mini属性的按钮

primary属性的按钮

default属性的按钮

warn属性的按钮

plain属性的按钮

disalbe属性的按钮

使用说明

3.view组件

4.img组件

选中图片

基本使用

data: {

imagePath:''},

handleChooseAlbum(){//系统API，让用户在相册中选择图片或拍照

wx.chooseImage({

success: (res)=>{//路径

const path = res.tempFilePaths[0]this.setData({

imagePath : path

})

},

})

}

相册功能

5.input组件：输入框

6.scroll-view组件

{{item}}

{{item}}

设置方法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文件

七、共同属性

属性

描述

注释

id

组件的唯一标识

整个页面的唯一标识

class

组件的样式表

在对应的wxss中定义的样式表

style

组件的内联样式

可以动态设置内联样式

hidden

组件是否显示

所有组件默认显示

data-*

自定义属性

组件上触发的事件十，会发送给事件处理的函数

bind*/cath*

组件的事件

八、支持的选择器

九、wxss的尺寸单位

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

十、引入wxss文件的方法

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

十一、官方样式库

十二、must语法

1.引入变量 {{message}}

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

3.bloot变量判断哈哈

isActive : false

十三、条件判断

ha

= 90 }}">优秀

= 80 }}">l良好

= 60 }}">及格

及格

代码实例

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

电影序号:{{index}}

电影名称:{{item}}

电影序号:{{index}}

电影名称:{{item}}

代码示例

item、index起名字

{{movie1}}-{{i}}

十四、模板的使用

哈哈

哈哈1

示例

十五、wxs

//JS代码

var message = "hello word";var name = "coderwhy";var sum = function(num1,num2){return num1 +num2

}//模块数据导出

module.exports ={

message : message

name : name

sum : sum

}

{{info.message}}

{{info.name}}

{{sum(20,30)}}

示例

十六、常见的事件类型

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

2

3

4 {5 "usingComponents": {6 "my-cpn":"路径"

7 }8 }9

10

11 Component({12 properties:{13 title:{14 type:String,15 value:'默认值'

16 }17 }18 })19

20

组件的使用方法

1.组件传递样式

Component({

externalClasses:['titileclass']

})

引用

组件传递内容

组件传递方法

组件修改数据

二十、插槽

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

槽的定义

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

Component({

options:{

multipleSlots :true}

})

插槽的js文件中引入

二十一、Component构造器

properties：定义传入的属性

data：定义内部属性

methods：定义方法

options：额外配置选项

externalClasses：引入外部样式

observers：属性和数据监听

pageLifetimes：页面生命周期

lefetimes：组件生命周期

二十二、网络请求

wx.request封装

二十三、展示弹窗API

showToast

showModal

showLoading

showActionSheet