做门面商铺比较好的网站,网站建设实训心得体会2000字,同一域名可以做相同网站吗,手机下载工具app目录
一、WXML与HTML的异同
二、WXSS和CSS的异同
三、微信小程序主要目录和文件的作用
四、小程序的双向绑定和vue的异同
五、微信小程序有哪些传值(传递数据)方法
六、小程序的生命周期函数
APP生命周期
Page生命周期
Component生命周期
七、小程序的原理
八、小程…目录
一、WXML与HTML的异同
二、WXSS和CSS的异同
三、微信小程序主要目录和文件的作用
四、小程序的双向绑定和vue的异同
五、微信小程序有哪些传值(传递数据)方法
六、小程序的生命周期函数
APP生命周期
Page生命周期
Component生命周期
七、小程序的原理
八、小程序的特点和优势
九、小程序与H5的区别
十、小程序和Vue写法的区别
十一、哪些方法可以提高小程序的应用速度
十二、小程序与原生App对比
十三、常用API
1. 页面跳转
2. 网络请求
3. 用户信息
4. 设备信息
5. 界面交互
6. 媒体文件
7. 支付
8. 缓存
十四、小程序的发布流程开发流程
常见问题
一、WXML与HTML的异同
同
都是页面渲染语言都使用类似的标签和属性描述网页的结构和内容结构化文档都支持将文档分为不同的元素和部分样式与行为分离
异
平台WXML主要用于微信小程序开发是微信小程序的一部分HTML主要用于Web开发用于构建网页标签和属性WXML是针对微信小程序如view、text等标签wx:if、wx:for等属性HTML包含用于构建网页的通用标签和属性如div、span、p等小程序没有DOM树和window对象标签名字不一样且小程序标签更少单一标签更多
二、WXSS和CSS的异同
WXSS微信小程序样式表和CSS层叠样式表
同
样式定义都定义页面元素的样式包括字体、颜色、大小、布局选择器都使用选择器例如标签选择器、类选择器、ID选择器等属性和值都使用类似的属性和值。如color属性用于定义文本颜色font-size属性用于定义字体大小等
异
平台WXSS主要用于微信小程序开发CSS主要用于Web开发单位WXSS支持rpxCSS使用px、em、rem。rpx是微信小程序中专门为适配不同屏幕尺寸而设计的单位比px更加灵活WXSS仅支持部分CSS选择器如不支持::after伪元素WXSS提供全局样式与局部样式
三、微信小程序主要目录和文件的作用
1. app.json全局配置文件包括页面路径、窗口样式、导航栏样式、网络超时时间等。它定义了小程序的整体结构和行为
2. app.js全局逻辑文件如小程序的生命周期函数、全局数据等。可以定义App()函数用于注册小程序的生命周期函数和全局数据
3. app.wxss全局样式文件
4. pages目录存放各个页面。每个页面通常包括一个.wxml文件页面结构、一个.js文件页面逻辑、一个.wxss文件页面样式和一个.json文件页面配置
5. utils目录存放工具函数和公共代码。可以存放一些常用的函数、网络请求封装等
6. images目录存放图片资源。
7. app.acss对于使用了支付宝小程序的开发者该文件用于定义小程序的全局样式与app.wxss功能类似但是针对支付宝小程序。
四、小程序的双向绑定和vue的异同
同
1. 都是实现数据的双向绑定即数据的改变可以自动更新到视图视图的改变也可以自动更新到数据
2. 简化开发简化开发流程减少手动操作DOM的需求提高开发效率
异
1. 实现方式在小程序通常需要手动监听数据变化手动更新视图Vue双向绑定是框架内置的特性无需手动处理框架会自动进行数据监听和更新视图
2. 响应式系统小程序需要通过setData()方法手动更新数据Vue通过数据劫持和依赖追踪实现数据的监听和更新
3. 语法小程序 value{{data}} bindinputsetDataVue是v-modeldata
4. 生命周期小程序页面手动编写手动调用Vue由框架自动调用
5. 跨平台小程序主要用于微信平台Vue用于Web开发、移动端开发等多种平台。
五、微信小程序有哪些传值(传递数据)方法
1. URL 参数传递在页面路径后面添加参数进行传值例如/pages/index/index?id1nameabc在目标页面的 onLoad 生命周期中可以通过 options 参数获取传递的值
2. Storage 存储使用 wx.setStorageSync 或 wx.setStorage 方法将数据存储到本地缓存中在目标页面中使用 wx.getStorageSync 或 wx.getStorage 方法获取数据
3. 全局数据传递数据存储在 App 实例中的 globalData 属性中在目标页面中使用 getApp().globalData 获取数据
4. 事件传递通过触发事件来传递数据例如在子组件中触发一个自定义事件并通过事件对象传递数据在父组件中监听该事件并获取传递的数据
5. 页面栈传递使用小程序提供的页面栈来传递数据通过 getCurrentPages 方法获取页面栈的实例使用 data 属性存储数据在目标页面中使用 options 获取数据
在跳转的时候还可以通过传递参数来实现数据的传递一般有以下两种方式
1. Query 参数传递适用于传递简单的参数如页面之间的关联 ID、状态等。
在通过wx.navigateTo()或wx.redirectTo()等方法跳转页面时可以在目标页面的路径后面附加查询参数如
wx.navigateTo({url: /pages/detail/detail?id123nametest
})目标页面可以通过onLoad生命周期函数的 options 参数获取到传递的查询参数如
onLoad: function(options) {console.log(options.id); // 输出 123console.log(options.name); // 输出 test
}
2. 页面栈传递适用于传递复杂的数据对象或者在页面关闭后需要回传数据的情况
在跳转时通过 wx.navigateTo({ url: pages/detail/detail, query: { id: 123 } }) 将参数传递到目标页面然后在目标页面中通过 getCurrentPages()[getCurrentPages().length - 1].options 获取参数如 var id getCurrentPages()[getCurrentPages().length - 1].options.id。
六、小程序的生命周期函数
APP生命周期 onLaunch(options)小程序初始化时调用可以获取打开小程序的场景值、query参数等 onShow(options)小程序启动或从后台进入前台时调用可以获取打开小程序的场景值、query参数等 Page生命周期 Component生命周期 onLoad(options)页面加载时调用可以获取上个页面传递的参数等 onShow()页面显示时调用 onReady()页面初次渲染完成时调用 onHide()页面隐藏时调用 onUnload()页面卸载时调用 created()组件实例刚刚被创建时调用可以在这个函数中定义组件的数据和方法等 attached()组件被添加到页面中时调用 ready()组件初次渲染完成时调用 moved()组件被移动到另外一个节点时调用 detached()组件被从页面中移除时调用
七、小程序的原理
1. 运行环境是微信客户端内置的一个轻量级的JavaScript引擎用于解析和执行小程序的代码。这个JavaScript引擎提供了一系列的API使得小程序能够与微信客户端进行交互
2. 开发工具提供了专门的开发工具
3. 框架支持类似于前端框架的开发模式类似于HTML、CSS和JavaScript的语法和组件系统
4. 渲染机制类似于Web开发的渲染方式使用了类似于HTML的WXML微信小程序标记语言来描述页面的结构使用了类似于CSS的WXSS微信小程序样式表来定义页面的样式使用了类似于JavaScript的逻辑语法来实现页面的逻辑功能
5. 数据通信可以通过网络请求和微信客户端进行数据通信。开发者可以使用微信提供的API来发送HTTP请求获取和上传数据。同时微信小程序还提供了一些特定的API如获取用户信息、支付等方便开发者与微信平台进行交互。
6. 安全机制如代码会经过微信平台的审核网络请求受到跨域和HTTPS的限制用户身份验证和权限管理。
八、小程序的特点和优势
快速启动、低内存、无需安装、跨平台支持、强大的生态系统
九、小程序与H5的区别
1. 开发语言和框架WXML和WXSS微信开发者工具HTML、CSS和JavaScript使用网页浏览器进行开发和调试。
2. 执行环境和性能微信客户端可以直接使用微信客户端提供的能力如地理位置、支付等在浏览器中运行受限于浏览器的性能和能力
3. 可访问性只能在微信客户端中访问通过浏览器访问
4.可扩展性微信小程序功能和扩展性受到限制。必须符合微信小程序的规范和限制经过微信审核才能发布H5则更加灵活可以随意扩展和定制没有限制
5. 开发成本不同H5需要兼容不同的浏览器
十、小程序和Vue写法的区别 开发模式小程序需要使用微信开发者工具进行开发和调试Vue可以在浏览器中使用webpack等工具进行开发和调试。 语法小程序使用WXML和WXSS语言Vue使用HTML、CSS和JavaScript 组件化都支持组件化的开发方式。小程序的组件化主要是通过Component方法进行定义和注册Vue通过Vue.component方法进行定义和注册。在使用组件时小程序需要使用组件的名称进行调用Vue通过组件的标签名称进行调用 状态管理小程序使用的是原生的数据绑定方式即通过setData方法进行数据的修改和更新Vue使用的是Vue.js提供的响应式数据绑定和Vuex状态管理机制
如
遍历小程序wx:forlistVue是v-foritem in list
调用data模型赋值的时候
小程序this.data.item // 调用this.setDate({item:1})//赋值
Vuethis.item //调用this.item1 //赋值
十一、哪些方法可以提高小程序的应用速度
提高页面的加载速度预加载页面或组件分包加载减少网络请求和数据传输减少默认的data的大小优化代码逻辑和性能节流和防抖异步编程和Promise避免复杂计算优化渲染性能减少页面层级和组件数量
十二、小程序与原生App对比
小程序的优点
基于微信平台开发享受微信自带的流量这个优点最大无需安装不占手机内存体验好开发周期段一般最多一个月就可以上线完成开发所需的资金少是开发原生APP的一半不到小程序名称是唯一的在微信的搜索里权重很高容易上手只要之前有HTMLCSSJS基础知识写小程序基本没有大问题基本不需要考虑兼容性问题发布审核高效基本上午发布审核下午就审核通过升级简单支持灰度发布开发文档完善社区活跃支持插件式开发一些基本功能可以开发成插件供多个小程序使用
缺点
局限性很强比如页面大小不能超过1M不能打开超过5个层级的页面样式单一小程序的部分组件已经是成型的了样式不能修改比如幻灯片导航只能依赖于微信依托与微信无法开发后台管理功能不利于推广推广面窄不能分享朋友圈只能分享给朋友附近小程序推广其中附加小程序也收到微信限制后台调试麻烦因为API接口必须https请求且公网地址也就是说后台代码必须发布到远程服务器上当然我们可以修改host进行dns映射把远程服务器转到本地或者开启tomcat远程调试不管怎么说终归调试比较麻烦前台测试有诸多坑最头疼莫过于模拟器与真机显示不一致js引用只能使用绝对路径不能操作DOM
原生App优点
响应速度快调用系统硬件的功能摄像头拨号短信蓝牙..在弱网无网络离线操作情况下体验好
原生App缺点
开发周期长开发成本高需要下载
十三、常用API
1. 页面跳转 - wx.navigateTo()保留当前页面跳转到应用内的某个页面 - wx.redirectTo()关闭当前页面跳转到应用内的某个页面 - wx.switchTab()跳转到应用内的某个 TabBar 页面并关闭其他所有非 TabBar 页面 - wx.navigateBack()关闭当前页面返回上一页面或多级页面 - wx.reLaunch()关闭所有页面打开到应用内的某个页面
2. 网络请求 - wx.request()发起网络请求 - wx.uploadFile()上传文件 - wx.downloadFile()下载文件 - wx.connectSocket()创建一个 WebSocket 连接
这些API都是异步操作需要传入一个 Object 类型的参数其中包括请求的 URL、请求的参数、请求的方法、请求的头部信息等如
wx.request({url: https://www.example.com/api,method: GET,data: {key1: value1,key2: value2},header: {content-type: application/json // 默认值},success(res) {console.log(res.data)},fail(res) {console.log(请求失败, res)}
})
3. 用户信息 - wx.getUserInfo()获取用户信息 - wx.login()登录 - wx.checkSession()检查登录态是否过期
4. 设备信息 - wx.getSystemInfo()获取系统信息 - wx.getNetworkType()获取网络类型 - wx.getLocation()获取地理位置信息
5. 界面交互 - wx.showToast()显示消息提示框 - wx.showModal()显示模态对话框 - wx.showLoading()显示 loading 提示框 - wx.showActionSheet()显示操作菜单
6. 媒体文件 - wx.chooseImage()从相册选择图片或拍照 - wx.previewImage()预览图片 - wx.saveImageToPhotosAlbum()保存图片到系统相册
7. 支付 - wx.requestPayment()发起微信支付请求
8. 缓存 - wx.setStorageSync()将数据存储在本地缓存中同步 - wx.getStorageSync()从本地缓存中获取数据同步
详细的 API 文档可以参考微信小程序官方文档
十四、小程序的发布流程开发流程
参考https://www.cnblogs.com/ssrstm/p/6855572.html
注册微信小程序账号获取微信小程序的AppID下载微信小程序开发者工具创建demo项目去微信公众号配置域名手机浏览代码上传提交审核小程序发布
常见问题
bindtap不会阻止事件冒泡catchatap会阻止事件不会在父元素上继续传递rpx小程序的尺寸单位规定屏幕为750rpx可适配不同分辨率屏幕本地资源无法通过wxss获取background-image可以使用网络图片或者base64或者使用标签wx.navigateTo无法打开页面一个应用同时只能打开5个页面请避免多层级的交互方式或使用wx.redirectTotabBar设置不显示1.tabBar的数量少于2项或超过5项都不会显示。2.tabBar写法错误导致不会显示。3.tabBar没有写pagePath字段程序启动后显示的第一个页面
