网站建设全程揭秘,专门做杂志的网站有哪些,wordpress扫码支付,建设小微公司网站需要多少钱文章目录二、微信小程序简介#xff08;一#xff09;文档相关开发者工具使用小程序代码构成小程序基本操作三、uniapp 开发规范uniapp 开发环境开发工具下载 HBuilderX工程搭建项目运行浏览器运行四、组件基础组件基础组件列表组件公共属性集合扩展组件自定义组件UNI-ICON五…
文章目录二、微信小程序简介一文档相关开发者工具使用小程序代码构成小程序基本操作三、uniapp 开发规范uniapp 开发环境开发工具下载 HBuilderX工程搭建项目运行浏览器运行四、组件基础组件基础组件列表组件公共属性集合扩展组件自定义组件UNI-ICON五、基础 APIAPI 列表页面布局相关uniapp 生命周期应用生命周期页面生命周期组件生命周期uniApp 特色条件编译插件安装二、微信小程序简介一
文档相关
开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/微信公众平台https://mp.weixin.qq.com/
开发者工具
下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
使用
必选项处理 appID 获取 微信公众平台进行 appID 获取 小程序代码构成 参考地址https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE .json 后缀的 JSON 配置文件.wxml 后缀的 WXML 模板文件.wxss 后缀的 WXSS 样式文件.js 后缀的 JS 脚本逻辑文件
小程序基本结构
view classcontainerview classuserinfobutton wx:if{{!hasUserInfo canIUse}}获取头像昵称/buttonblock wx:elseimage src{{userInfo.avatarUrl}} background-sizecover/imagetext classuserinfo-nickname{{userInfo.nickName}}/text/block/viewview classusermottotext classuser-motto{{motto}}/text/view
/view小程序基本操作 配置信息 app.json 全局配置 - https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html {pages: [pages/index/index, pages/logs/index],window: {navigationBarTitleText: Demo},tabBar: {list: [{pagePath: pages/index/index,text: 首页},{pagePath: pages/logs/index,text: 日志}]},networkTimeout: {request: 10000,downloadFile: 10000},debug: true
}页面配置 app.json {navigationBarBackgroundColor: #ffffff,navigationBarTextStyle: black,navigationBarTitleText: 微信接口功能演示,backgroundColor: #eeeeee,backgroundTextStyle: light
}全局生命周期函数 app.js /*** 当小程序初始化完成时会触发 onLaunch全局只触发一次*/onLaunch: function () {},/*** 当小程序启动或从后台进入前台显示会触发 onShow*/onShow: function (options) {},/*** 当小程序从前台进入后台会触发 onHide*/onHide: function () {},/*** 当小程序发生脚本错误或者 api 调用失败时会触发 onError 并带上错误信息*/onError: function (msg) {}页面生命周期函数 - https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html onLoad: function(options) {// 页面创建时执行},onShow: function() {// 页面出现在前台时执行},onReady: function() {// 页面首次渲染完毕时执行},onHide: function() {// 页面从前台变为后台时执行},onUnload: function() {// 页面销毁时执行},onPullDownRefresh: function() {// 触发下拉刷新时执行},onReachBottom: function() {// 页面触底时执行},onShareAppMessage: function () {// 页面被用户分享时执行},onPageScroll: function() {// 页面滚动时执行},onResize: function() {// 页面尺寸变化时执行}定义组件
引用组件在 json 文件
使用组件 组件生命周期-https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html Component({lifetimes: {created() {console.log(created,组件实例刚刚被创建好时 created 生命周期被触发)},attached() {console.log(组件实力进入页面节点树时候进行执行)},detached() {console.log(在组件实例被从页面节点树移除时执行)},},
})界面跳转 新界面打开https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html 调用 API wx.navigateTo
历史记录椎
使用组件 navigator open-typenavigateTo url/页面重定向 调用 API wx.redirectTo
使用组件 navigator open-typeredirectTo/页面返回 调用 API wx.navigateBack
使用组件navigator open-typenavigateBack
用户按左上角返回按钮Tab 切换 调用 API wx.switchTab
使用组件 navigator open-typeswitchTab/
用户切换 Tab重启动 调用 API wx.reLaunch
使用组件 navigator open-typereLaunch/数据绑定 view{{message}}/viewPage({data: {message: hello world,},
})条件渲染 view wx:if{{isShow}}条件判断显示/viewPage({data:{isShow:false}
})列表渲染 view wx:for{{list}} wx:for-indexidx wx:for-itemitemName{{idx}}: {{itemName.name}}
/viewPage({data: {list: [{ name: a }, { name: b }],},
})三、uniapp 开发规范 页面文件遵循 Vue 单文件组件SFC规范 组件标签靠近小程序规范 https://uniapp.dcloud.io/component/README templateview 页面内容 /view
/templatescript
export default {data() {return {}},methods: {},
}
/scriptstyle/style接口能力JS API靠近微信小程序规范 https://uniapp.dcloud.io/api/README uni.getStorageInfoSync()数据绑定事件处理同 Vue.js 规范 templateview clickonClickFn 点击事件绑定 /view
/templatescript
export default {methods: {onClickFn() {console.log(click事件)},},
}
/scriptstyle langscss scoped/style兼容多端运行使用 flex 布局进行开发 uniapp 开发环境 开发工具 uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处 模板丰富完善的智能提示一键运行 下载 HBuilderX 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html点击首页的 DOWNLOAD 按钮选择下载 正式版/alpha - App 开发版将下载的 zip包 进行解压缩将解压之后的文件夹存放到纯英文的目录中且不能包含括号等特殊字符双击 HBuilderX.exe 即可启动 HBuilderX详细安装文档 https://hx.dcloud.net.cn/Tutorial/install/windows 工程搭建 文件 - 新建 - 项目 填写项目基本信息 项目创建成功 基本目录结构 项目名称
----【pages】 内部存放所有页面
----【static】 存放所有静态资源比如图片字体图标
----【unpackage】存放所有打包生成后的文件
----app.vue 应用配置用来配置App全局样式以及监听 应用生命周期
----main.js Vue初始化入口文件
----mainfast.json 配置应用名称、appid、logo、版本等打包信息
----pages.json 配置页面路由、导航条、选项卡等页面类信息
----uni.scss 用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格uni.scss文件里预置了一批scss变量预置。项目运行 浏览器运行 ### 小程序运行1. 填写自己的微信小程序的 AppID2. 在 HBuilderX 中配置“微信开发者工具”的**安装路径**3. 在微信开发者工具中通过 设置 - 安全设置 面板开启“微信开发者工具”的**服务端口**4. 在 HBuilderX 中点击菜单栏中的 运行 - 运行到小程序模拟器 - 微信开发者工具将当前 uni-app 项目编译之后自动运行到微信开发者工具中从而方便查看项目效果与调试5. 初次运行成功之后的项目效果### app 真机运行 确保你的手机与电脑是在同一个局域网下面1. 手机开启开发者模式
2. 选择数据管理
3. hbuildeX 选择真机运行
4. 等待基座安装
5. 安装完成手机运行项目### IOS 模拟器运行1. Xcode 下载
2. 定义版本进行模拟器运行***四、组件
文档参考地址https://uniapp.dcloud.net.cn/component/
基础组件 基础组件在 uni-app 框架中已经内置无需将内置组件的文件导入项目也无需注册内置组件随时可以直接使用比如view组件。 组件演示参考地址 https://hellouniapp.dcloud.net.cn/pages/component/view/view
基础组件列表
视图容器 view 视图容器类似于 html 中的 divscroll-view 可滚动试图容器 https://uniapp.dcloud.net.cn/component/scroll-viewswiper 滑块视图容器比如用于轮播 banner 基础内容 icon 图标 uni-iconstext 文字rich-text 文字 可以解析标签progress 进度条 表单组件Form button 按钮checkbox 多项选择器editor 富文本输入框form 表单input 输入框label 标签picker 弹出式聊表选择器picker-view 窗体内嵌入式聊表选择器radio 单项选择器slider 滑动选择器switch 开关选择器textarea 多行文本输入框 路由与页面跳转Navigation navigator 页面链接类似于 html 中的 a 标签 媒体组件 audio 音频camera 相机image 图片video 视频
组件公共属性集合 除了上述公共属性还有一类特殊属性以v-开头称之为 vue 指令如 v-if、v-else、v-for、v-model。 扩展组件
Demo 地址https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view
参考地址https://ext.dcloud.net.cn/search?quni-icons
自定义组件
componets 文件夹下定定义组件页面引用组件无需倒入适量直接使用即可其他操作组件传值事件绑定同 vue
UNI-ICON
插件市场 -- 搜索 uni-icons -- uni-icons 图标 -- 小程序的域名处理
在小程序—开发管理—开发设置—服务器域名
五、基础 API
参考地址https://uniapp.dcloud.net.cn/api/README
API 列表 网络请求 uni.request 发起网络请求 为了解决 uni.request 网络请求 API 相对简单的问题可使用escook/request-miniprogram 进行网路请求的处理 参考地址https://www.npmjs.com/package/escook/request-miniprogram 在小程序中无法使用 fetch 及 axios 进行网络请求发送 测试接口地址https://study.duyiedu.com/api/herolist 上传、下载 uni.unloadFile 上传文件 https://uniapp.dcloud.net.cn/api/request/network-fileuni.downloadFile 下载文件 图片处理 uni.chooseImage 从相册选择图片或者拍照 https://uniapp.dcloud.net.cn/api/media/image?idchooseimageuni.previewImage 预览图片uni.getImageInfo 获取图片信息 数据缓存 https://uniapp.dcloud.net.cn/api/storage/storage?idsetstorage uni.getStorage 异步获取本地数据缓存uni.getStorageSync 同步获取本地数据缓存uni.setStorage 异步设置本地数据缓存uni.setStorageSync 同步设置本地数据缓存uni.removeStorage 异步删除本地数据缓存uni.reoveStorageSync 同步删除本地数据缓存 交互反馈 https://uniapp.dcloud.net.cn/api/ui/prompt?idshowtoast uni.showToast 显示提示框uni.showLoading 显示加载提示框uni.hideToast 隐藏提示框uni.hideLoading 隐藏加载提示框uni.showModal 显示模态框uni.showActionSheet 显示菜单列表 路由 uni.navigateTo 保留当前页面跳转到应用内某个界面使用 uni.navigateBack 返回原页面uni.redirectTo 关闭当前界面跳转到应用内的某个界面uni.reLaunch 关闭所有界面打开应用内的某个界面uni.switchTab 跳转到 tab Bar 页面
页面布局相关
page 页面容器 css 属性 page: {height: 100%;background-color: red;
}尺寸单位
可使用单位px rpx,upx, rem vh vw
外部样式文件引入
同 vue 使用相同
uniapp 生命周期
**参考地址**https://uniapp.dcloud.net.cn/collocation/frame/lifecycle?id应用生命周期
应用生命周期 onLaunch 初始化完成时触发全局 ️ 触发一次 onShow uni-app 启动或从后台进入前台显示 onHide 当 uni-app 应用从前台进入后台 只能在 App.vue 里面进行监听在其他界面监听无效
页面生命周期
onLoad 监听页面加载可获取上个界面传递的参数onShow 监听页面显示每次出现在屏幕上都进行触发onReady 监听页面初次渲染完成onHide 监听页面隐藏onUnload 监听页面卸载onReachBottom 页面滚动到底部事件
组件生命周期
beofreCreatecreatedboforeMountmountedboforeDestroydestroyed uniApp 特色
条件编译 条件编译是用特殊的注释作为标记在编译时根据这些特殊的注释将注释里面的代码编译到不同平台。 语法
取值 条件编译支持的文件
.vue.js.csspages.json各预编译语言文件如.scss、.less、.stylus、.ts、.pug 条件编译是利用注释实现的在不同语法里注释写法不一样js 使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 !-- 注释 -- 插件安装
scss 安装 可以使用多种预编译处理器进行安装使用以 scss 文件为例 下载地址https://ext.dcloud.net.cn/plugin?namecompile-node-sass
