微信小程序&django django笔记

小程序的文件类型

.wxml （结构，类似于html）标签名字：由HTML（、、...）改为===》微信小程序的WXML()
wx:if 、wx:for、{{}}

.wxss (表现，类似于css)

具备CSS的大部分属性
新增尺寸单位
全局样式和局部样式

.js (行为)

原生js语言

.json (配置)

工具配置—project.config.json
项目配置—app.json
页面配置—.json

目录解释:

pages目录—页面相关的代码（新建小程序项目，自动生成默认有的）
utils目录—工具相关代码（网络请求、文件操作等）（新建小程序项目，自动生成默认有的）
其他文件—thirdparty(第三方代码)、conponents(小程序组件代码)、resources(存放小程序资源，图标图片等等)

小程序的全局入口、配置与样式

全局入口—app.js
全局配置—app.json
全局样式—app.wxss

小程序的配置

全局配置 — app.json
页面配置 — .json
小程序的全局配置
pages列表配置
window属性配置
abbar配置（底部菜单栏）

小程序的页面配置

只能配置全局配置中的window配置项内容
会覆盖全局配置中的window配置开启下拉刷新
在.json写入如图所示，即可下拉触发刷新

文章图片

小程序的逻辑层
小程序注册逻辑
页面注册逻辑

【微信小程序&django】小程序注册逻辑
App函数:
注册全局唯一的小程序
只能调用一次
接受一个对象作为函数参数，这个对象指定了两个东西（第一个东西是小程序的全局数据，第二个东西是小程序的生命周期回调函数）

文章图片

页面注册逻辑
Page函数:

注册一个页面
接受一个对象作为函数参数，这个对象指定了两个东西（第一个东西是页面数据，第二个东西是页面的生命周期回调函数）

页面数据:

data属性

data:{ message: "hello world", }

访问： this.data.message
修改：this.setData({})

使用全局数据

获取全局唯一的App实例 const app = getApp()
通过唯一实例获取全局数据 var data = https://www.it610.com/article/app.globalData
页面的生命周期回调(比较难理解)
看页面生命周期时序图，配合理解

文章图片

小程序的视图层 xxx.wxml

数据绑定
列表渲染
条件渲染
绑定事件

数据绑定
语法： {{ }}

//视图层例如：index.wxml {{ message }}//逻辑层例如：index.js Page({ data:{ message: 'Hello MINA!' } })

列表渲染
语法：wx:for

//逻辑层xxx.js Page({ data:{ array:[{// array数组，包含了两个对象 messqge:'foo', },{ message:'bar' }] } })//视图层 xxx.wxml // for循环array数组//注意，与变量展示相比，需要加两个冒号 {{index}}: {{item.message}} // index是数组序号，item是数组里的对象

条件渲染
语法： wx:if 、wx:elif、wx:else

5}}”> 1 2 3

绑定事件

页面事件触发时机 tap手指触摸后马上离开 longpress手指触摸后，超过350ms再离开（推荐使用） longtap手指触摸后，超过350ms再离开 touchstart手指触摸动作开始 touchend手指触摸动作结束

事件绑定的写法以key、value的形式
key以bind或catch开头，然后跟上事件的类型

// 视图层xxx.wxml Click me! // 逻辑层 xxx.js Page({ tapName: function(event) { console.log(event) } })

小程序提供的能力和常用API

微信API
开发能力
基础组件

微信API

网络请求
本地储存
文件系统

网络请求

HTTP请求（异步的请求！！！！！！！）

wx.request({//HTTP请求，wx.request（）函数包含一个对象{...} url: '',//string类型，表示服务端地址 data: {},//表示请求参数 header: {},//object类型，表示HTTP headers请求头 method: 'POST',//string类型，请求方法 success: function(res){ //function类型，接口成功的回调函数 console.log(res.data) }, fail: function(res){}//function类型，接口失败的回调函数 })

文件上传、下载
上传文件

wx.uploadFile({ url: 'upload',//服务端地址 filePath: 'example.jpg', //文件资源的路径 name: 'file',//文件对应的Key,文件名字 formData: {//文件附加信息 'user'：‘test’ }, success(res){//异步的，成功回调函数 console.log(res.data) } })

下载文件

wx.downloadFile({ url: 'download',//下载的url header: {}, filePath: 'example.jpg',//下载后存储的路径 success(res) {//接口成功的回调函数 console.log(res.statusCode) }})

*Task(网络任务对象)
异步任务提交以后，需要对任务进行操作时，使用Task对象。

RequestTask (发起HTTP请求，可以得到一个RequestTask)
UploadTask (同理，上传文件时，也可以得到)
DownloadTask （同理）
SocketTask （同理）

拿到这些task，可以做什么呢？

中断任务（比如上传文件的时候，上传到一半的时候，想取消它，可以调用这task来中断）
触发回调函数（比如上传文件的时候，上传到10%时，可以用task来触发回调函数）
关闭连接（比如HTTP请求，socket请求，请求到一半，可以用task对象来关闭网络连接）

本地存储
将数据存储在本地缓存中指定的key中，数据存储生命周期跟小程序本身一致
操作本地存储，有四个API:

wx.setStorage wx.getStorage（异步的），也有同步的api：wx.getStorageSync wx.removeStorage wx.clearStorage(慎用，会把本地所有的缓存都删除掉)

文件系统

全局文件管理器
获取全局唯一的文件管理器

var fs=wx.getFileSystemManager()

文件的增删改查
对文件进行操作的API有很多，完全覆盖编程语言对文件的各种操作

fs.saveFilefs.writeFilefs.readFilefs.removeSavedFilefs.appendFile

文件夹的操作

fs.mkdirfs.rmdirfs.isDirectoryfs.isFile

开发能力

用户数据
推送消息
运营数据

用户数据
头像、昵称等公开信息 — wx.getUserInfo()
openid等敏感数据
推送消息
基于微信的通知渠道，小程序框架为开发者提供了可以高效触达用户的消息。（在微信的服务通知查看）
运营数据
小程序管理后台—数据分析
小程序数据助手（小程序）
基础组件
视图容器—view、scroll-view、swiper、cover-view
基础内容—text、icon、rich-text
表单、导航—button、form、input
WeUI-wxss
WeUI是一套同微信原生视觉体验一致的基础样式库
微信官方设计团队为微信内网页和微信小程序量身设计
包含button、view等众多元素
Github搜索weui-wxss获取源码
手机预览，微信搜索：weui小程序
怎么使用weui
1.新建一个thirdparty的目录，放入weui.wxss文件
2.在全局的app.wxss文件中，加入

@import"thirdparty/weui.wxss";

文章图片

小程序对接Django

本地开发对接
远端部署测试

本地开发对接
小程序只可以跟指定的域名与进行网络通信(指定域名需要填写到小程序开发者后台管理那里面去)
小程序必须使用HTTPS发起网络请求
开发阶段可以取消以上限制
本地开发对接django后台的方法：
在微信开发者工具—>设置—>项目设置，右边弹出项目详情，勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书“
远端部署测试
使用git远端同步代码
本地代码<-push–>git仓库(推荐coding.net、oschina开源中国、码云)<-pull–>服务器代码
管理依赖环境