微信小程序&django

小程序的文件类型

• .wxml （结构，类似于html） 标签名字：由HTML（<div>、<p>、<span>...）改为===》 微信小程序的WXML(<view>)
• 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写入如图所示，即可下拉触发刷新
  
  小程序的逻辑层
• 小程序注册逻辑
• 页面注册逻辑

小程序注册逻辑

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

页面注册逻辑

Page函数:

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

页面数据:

• data属性

data:{
    message: "hello world",
}

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

• 使用全局数据

获取全局唯一的App实例 const app = getApp()
通过唯一实例获取全局数据 var data = app.globalData

页面的生命周期回调(比较难理解)
看页面生命周期时序图，配合理解

小程序的视图层 xxx.wxml

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

数据绑定

语法： {{ }}

//视图层 例如：index.wxml
<view>{{ message }}</view>

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

列表渲染

语法：wx:for

//逻辑层  xxx.js
Page({
    data:{
        array:[{          // array数组，包含了两个对象
            messqge:'foo',
        },{
            message:'bar'
        }]
    } 
})    

//视图层 xxx.wxml
<view wx:for="{{array}}">   // for循环array数组   //注意，与变量展示相比，需要加两个冒号
    {{index}}: {{item.message}} // index是数组序号，item是数组里的对象
</view>

条件渲染

语法： wx:if 、wx:elif、wx:else

<view wx:if=“{{length > 5}}”> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

绑定事件

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

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

// 视图层  xxx.wxml
<view id="tapTest" data-hi="WeChat" bindtap='tapName'> Click me! </view>


// 逻辑层 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.saveFile

fs.writeFile

fs.readFile

fs.removeSavedFile

fs.appendFile

文件夹的操作

fs.mkdir

fs.rmdir

fs.isDirectory

fs.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–>服务器代码

管理依赖环境

requirements.txt

pip install -r requirement.txt