小程序开发与 Django开发学习记录 作者： lambert 发表时间： 2020年11月11日 20:37 91 分类： Django 微信小程序 [TOC] # 1. 小程序开发的准备工作 - 邮箱注册 - [注册官网](https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN) - 开发者配置与 APPID - wxdc2537954632bd15 - 熟悉开发者工具 - 如何创建模板 - 如何编译、预览 - 项目目录如何组织 - 小程序开发的准备工作 - 小程序的开发规范 - 目录规范 - utils -- 工具 - pages -- 页面 - components -- 组件 - thirdparty -- 第三方 - app.js -- 小程序逻辑 - app.json -- 小程序公共配置 - app.wxss -- 小程序公共样式表 - 命名规范 - 代码规范 - js -- 页面逻辑 - JSON -- 页面配置 - wxml -- 页面结构 - wxss -- 页面样式表 **注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名** - 允许上传的文件 在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：*.js、app.json、*.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下： 1. wxs 2. png 3. jpg 4. jpeg 5. gif 6. svg 7. json 8. cer 9. mp3 10. aac 11. m4a 12. mp4 13. wav 14. ogg 15. silk - 交互规范 - 友好礼貌 -- 突出重点 - 清晰明确 -- 减少用户等待，不要阻塞页面，做好异常处理 - 便捷优雅 -- 减少不必要的输入，避免造成用户误操作 - 统一稳定 -- 不同页面间保持一致 的交互控件和输入方式 # 1-2 小程序的项目工程目录介绍 ## 小程序的文件类型 - js -- 页面逻辑 - json - 工具配置 -- project.config.json - 项目配置 -- app.json - 页面路径 - 网络超时时间 - 页面表现 - 底部 tabbar - 页面配置 -- <page name>.json - [wxml](https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/) -- 页面结构 - 标签名字统一使用 <view> - wx: if、wx:for、 {{}} - [wxss](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html) -- 页面样式表 - 具备 CSS 的大部分属性 - 新增一些尺寸单位 （rpx）适配移动端，统一差异 - 全局样式和局部样式 ## 小程序的目录说明 - utils -- 工具 - pages -- 页面 - components -- 组件 - thirdparty -- 第三方 - app.js -- 小程序逻辑 - app.json -- 小程序公共配置 - app.wxss -- 小程序公共样式表 ## 小程序的全局入口、配置与样式 # 1-3 小程序框架 - 小程序的配置 - 全局配置 -- [app.json](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html) - pages 列表配置 - windwo 属性配置 - tabbar 配置 - 页面配置 -- <page>.json - 只能配置全局配置中的 window 配置项内容 - 会覆盖全局配置 - 开启下拉刷新配置 - index.json ```json { "usingComponents": {}, "enablePullDownRefresh": true } ``` - 小程序的逻辑层（数据、行为、路由） - App 函数 - 注册全局唯一的小程序 - 只能调用一次 - 接受一个对象最为函数参数 - 小程序的全局变量 - 小程序的生命周期函数 - 页面注册逻辑 - Page 函数 - 注册一个页面 - 接受一个对象作为函数参数 - 指定页面回调 - 页面数据 - data 属性 - 页面所有数据都保存在 data 对象中 - 访问 ```js this.data.message ``` - 修改 ```js this.setData({}) ``` - 使用全局数据 - 获取全局唯一的 App 实例 ```js const app = getApp() var data = app.globalData.userInfo ``` - 页面生命周期  | 生命周期回调函数 | 触发时机 | | :--------------: | :------------------: | | onLoad | 监听页面加载 | | onShow | 监听页面显示 | | onReady | 监听页面初次渲染完成 | | onHide | 监听页面隐藏 | | onUnload | 监听页面卸载 | - 小程序视图层(结构、渲染、交互) [wxml 语法参考](https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/) - 数据绑定 - 语法： ｛{}｝ ```html <view> {{message}}</view> Page({ data: { message: 'Hello MINA' } }) ``` - 列表渲染 - 条件渲染 - 绑定事件 ## 总结：`逻辑层`与`视图层`通过`数据绑定`与`事件回调`相互交互 - 小程序框架 逻辑层（js） + 视图层（wxml + wxss） || 微信 App Native 基础能力 || 兼容操作系统 OS Native 硬件能力 # 1-4 小程序提供的能力和常用的 API ## 微信 API - 网络请求 - [HTTP 请求](https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html) - 文件上传、下载 - *Task (网络任务对象) - 本地存储 - 将数据存储在本地缓存中指定的 key 中，数据存储生命周期跟小程序本身一致 - wx.setStorage(异步请求，需要在回调里面操作数据) - wx.setStorageSync 同步 - wx.getStorage - wx.removeStorage - wx.clearStorage - 文件系统 - 全局的文件管理器 - 获取全局唯一的文件管理器 ```js 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 等众多元素 ### 引入方式 app.wxss `@import 'style/weui.wxss';` ```css /**app.wxss**/ @import 'style/weui.wxss'; .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } ``` app.json `添加对应页面` ``` { "pages":[ "pages/index/index", "pages/logs/logs", "example/grid/grid" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "", "selectedIconPath": "" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "", "selectedIconPath": "" }, { "pagePath": "example/grid/grid", "text": "九方格", "iconPath": "", "selectedIconPath": "" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" } ``` # 小程序对接 Django ## 本地开发对接 - 小程序只可以跟指定的域名进行网络通信 - 小程序必须使用 HTTPS 发起网络请求 - 开发阶段可以取消以上限制, 具体操作如下： - 微信开发者工具 - 点击设置 - 项目设置  ## 远端部署测试 - 使用 Git 远端同步代码 - 本地代码 (push) ==》 Git 仓库 （拉取） ==》 服务器代码 ## 管理依赖环境 - python 版本 - requirement.txt - pip install -r requirement.txt # 小程序的发布流程 - 开发 - 预览 - IDE 预览 - 真机预览 - 权限管理 - 开发者 - 体验者 - 其他成员 - 上传代码 - 版本管理 - 开发版本 - 审核中版本 - 上线版本 - 审核发布 - 上线运营 