uniapp开发微信小程序

uniapp开发微信小程序

微信小程序的开发

https://developers.weixin.qq.com/miniprogram/dev/framework/

1 注册微信小程序

微信小程序注册：
https://mp.weixin.qq.com/wxopen/waregister?action=step1
1 选择 主体类型
个人类型不支持微信认证和微信支付。
选择 个体工商户：个体工商户最多只能注册5个账号
2 选择 注册方式
企业账号验证方式有两种：
a 对公账户打款给腾讯：10日内
b 或者微信认证并付款300：尽快认证
复用公众号资质，无需付款：公众号为订阅号，无支付功能。
3 完成注册后，完善小程序信息
填写服务类目等
4 绑定开发者
小程序后台管理界面
https://mp.weixin.qq.com/
5 获取AppID
6 提交审核、填写审核信息
参考审核标准
7 运营角色 手动点击发布

• 获得appid

2 安装微信开发者工具

下载微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
主界面介绍
https://developers.weixin.qq.com/miniprogram/dev/devtools/page.html#%E5%B7%A5%E5%85%B7%E6%A0%8F
测试号
https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html

3 添加项目成员

4 创建你的第一个小程序

5 发布上线

• 预览、上传、提交审核、发布

界面设计规范

https://developers.weixin.qq.com/miniprogram/design/

平台限制

• 微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；

uniapp接入微信小程序

https://uniapp.dcloud.io/README

uniapp是什么

• 跨平台开发框架

开发工具(HBuilderX)

https://www.dcloud.io/hbuilderx.html

• 设置微信开发者工具的安装路径

  • 运行-运行到小程序模拟器-运行设置-运行配置-微信开发者工具路径

• 设置微信小程序的appid

  在项目manifest.json中微信小程序中配置

• 运行、发行

• 插件市场

  • 工具-插件安装
  • 访问https://ext.dcloud.net.cn/?cat1=1&cat2=11

组件

• 原生组件

  https://hellouniapp.dcloud.net.cn/pages/component/web-view-local/web-view-local

  • div/ul/li - view
  • span/fone - text
  • a - navigator
  • img - image
  • input - 仅输入框
  • select - picker
  • iframe - web-view
  • 不变：form/button/label/textarea/canvas/video
  • audio – api方式
  • 新增手机端常用组件

• 扩展组件

  • uni-ui

    https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge

  • color-ui

    http://demo.color-ui.com/

  • uview-ui

    https://www.uviewui.com/components/intro.html

• 组件规范

  https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83

  • easycom组件规范

    • 导入即用
    • 自动按需引入

  • uni_module组件规范

    • 右键更新组件

  • datacom组件规范

    • 根据data自动渲染

api

• 概述

  • 标准js和浏览器js的区别

    • 非H5端不支持window、document、navigator等浏览器专用对象。

• 基础

  • 日志打印

    • 敲clog：可直接输出console.log()；
    • 敲clogv：可输出console.log(": " + );，并且出现双光标，方便把变量名称和值同时打印出来。

  • 定时器

  • ArrayBuffer 对象 和 Base64 字符串 互转

  • 生命周期

    • 应用生命周期
    • 页面生命周期

  • 应用级事件

    • 若开发者没有调用 uni.onPageNotFound 绑定监听，也没有声明 App.onPageNotFound，当跳转页面不存在时，将推入客户端原生的页面不存在提示页面。

  • 拦截器

    • 需要拦截的api名称，如：uni.addInterceptor(‘request’, OBJECT) ，将拦截 uni.request()

• 网络

• 路由与页面跳转

• 数据缓存

• 位置

• 媒体

• 设备

• 键盘

• 界面

• 页面和窗体

• 文件

• 绘画

与传统H5的不同

https://ask.dcloud.net.cn/article/35657

• js api

  • alert/confirm - uni.showmodel
  • ajax - uni.request
  • cookie/session/localstorage - uni.storage
  • wx.xxx - uni.xxx

• css

  • 不支持*选择器

  • body - page

  • px - rpx

  • 字体文件和背景图片 < 40k

    • 否则应从服务器引用或base64后引用

• 工程结构

  • pages.json

    • 设置首页
    • 设置导航栏、底部tabbar
    • vue中的路由管理

  • manifest.json

    • 小程序的非页面管理内容

XMind - Trial Version