如何提高网站安全,网络营销必看的几本书,wordpress在线题库,c 网站开发需要什么软件UniApp 与微信小程序详细对比
1. 开发环境
微信小程序#xff1a; 主要使用微信开发者工具提供模拟器、调试工具和性能监控只能开发微信小程序 UniApp#xff1a; 主要使用 HBuilderX#xff0c;但也支持 VS Code 等其他编辑器HBuilderX 提供可视化界面、代码提示、调试工…UniApp 与微信小程序详细对比
1. 开发环境
微信小程序 主要使用微信开发者工具提供模拟器、调试工具和性能监控只能开发微信小程序 UniApp 主要使用 HBuilderX但也支持 VS Code 等其他编辑器HBuilderX 提供可视化界面、代码提示、调试工具等可以开发多平台应用包括小程序、H5、App 等
2. 项目结构
微信小程序├── pages/ # 页面文件夹
├── components/ # 自定义组件文件夹
├── utils/ # 工具函数文件夹
├── app.js # 全局 JS
├── app.json # 全局配置
├── app.wxss # 全局样式
└── project.config.json # 项目配置文件UniApp├── pages/ # 页面文件夹
├── components/ # 自定义组件文件夹
├── static/ # 静态资源文件夹
├── store/ # Vuex 状态管理可选
├── App.vue # 应用配置用来配置App全局样式以及监听应用生命周期
├── main.js # Vue 初始化入口文件
├── manifest.json # 配置应用名称、图标、权限等打包信息
└── pages.json # 配置页面路由、导航条、选项卡等页面类信息3. 页面文件
微信小程序 .wxml页面结构类似 HTML.wxss页面样式类似 CSS.js页面逻辑.json页面配置 UniApp .vue 文件包含三个部分 template页面结构支持小程序组件和 HTML 标签script页面逻辑style页面样式支持 CSS 预处理器如 SCSS、Less
4. 基础组件
微信小程序UniApp说明viewview视图容器类似于 divtexttext文本组件imageimage图片组件buttonbutton按钮组件inputinput输入框组件textareatextarea多行输入框组件scroll-viewscroll-view可滚动视图区域swiperswiper滑块视图容器navigatornavigator页面链接组件progressprogress进度条组件checkboxcheckbox多选框组件radioradio单选框组件pickerpicker底部弹起的滚动选择器sliderslider滑动选择器switchswitch开关选择器formform表单组件
注UniApp 支持更多 HTML5 标准组件在 App 端和 H5 端表现更接近标准 HTML。
5. 生命周期
微信小程序UniApp (Vue3 组合式 API)说明onLoadonLoad页面加载时触发onShowonShow页面显示时触发onReadyonReady页面初次渲染完成时触发onHideonHide页面隐藏时触发onUnloadonUnload页面卸载时触发onPullDownRefreshonPullDownRefresh用户下拉刷新时触发onReachBottomonReachBottom页面上拉触底时触发onShareAppMessageonShareAppMessage用户点击右上角分享时触发onPageScrollonPageScroll页面滚动时触发onTabItemTaponTabItemTap点击 tab 时触发onResizeonResize页面尺寸变化时触发
注
UniApp 在 Vue3 组合式 API 中这些钩子需要单独引入使用。UniApp 还提供了额外的应用生命周期如 onLaunch、onShow、onHide 等。
6. 数据绑定与更新 微信小程序 Page({data: {message: Hello,list: [1, 2, 3]},changeMessage() {this.setData({ message: Hi,list[0]: 4 // 修改数组元素})}
})view{{message}}/view
view wx:for{{list}} wx:key*this{{item}}/viewUniApp (Vue3 组合式 API): import { ref, reactive } from vueexport default {setup() {const message ref(Hello)const list reactive([1, 2, 3])function changeMessage() {message.value Hilist[0] 4 // 直接修改响应式数组}return {message,list,changeMessage}}
}view{{message}}/view
view v-foritem in list :keyitem{{item}}/view7. 条件渲染
微信小程序view wx:if{{condition}}True/view
view wx:elif{{condition2}}Condition2/view
view wx:elseFalse/viewUniAppview v-ifconditionTrue/view
view v-else-ifcondition2Condition2/view
view v-elseFalse/view8. 列表渲染
微信小程序view wx:for{{items}} wx:keyid{{index}}: {{item.name}}
/viewUniAppview v-for(item, index) in items :keyitem.id{{index}}: {{item.name}}
/view9. 事件处理
微信小程序button bindtaphandleClick data-id{{item.id}}点击/buttonPage({handleClick(event) {const id event.currentTarget.dataset.idconsole.log(Clicked item:, id)}
})UniAppbutton clickhandleClick(item.id)点击/buttonexport default {methods: {handleClick(id) {console.log(Clicked item:, id)}}
}10. 路由导航
微信小程序// 页面跳转
wx.navigateTo({ url: /pages/about/about?id1 })// 页面重定向
wx.redirectTo({ url: /pages/login/login })// 页面返回
wx.navigateBack({ delta: 1 })// Tab 切换
wx.switchTab({ url: /pages/home/home })UniApp// 页面跳转
uni.navigateTo({ url: /pages/about/about?id1 })// 页面重定向
uni.redirectTo({ url: /pages/login/login })// 页面返回
uni.navigateBack({ delta: 1 })// Tab 切换
uni.switchTab({ url: /pages/home/home })11. 网络请求
微信小程序wx.request({url: https://api.example.com/data,method: GET,data: { id: 1 },header: {content-type: application/json},success(res) {console.log(res.data)},fail(err) {console.error(err)}
})UniAppuni.request({url: https://api.example.com/data,method: GET,data: { id: 1 },header: {content-type: application/json},success(res) {console.log(res.data)},fail(err) {console.error(err)}
})注UniApp 还支持使用 async/await 语法try {const res await uni.request({url: https://api.example.com/data,method: GET,data: { id: 1 }})console.log(res.data)
} catch (err) {console.error(err)
}12. 存储
微信小程序// 设置存储
wx.setStorageSync(key, value)// 获取存储
const value wx.getStorageSync(key)// 移除存储
wx.removeStorageSync(key)// 清除所有存储
wx.clearStorageSync()UniApp// 设置存储
uni.setStorageSync(key, value)// 获取存储
const value uni.getStorageSync(key)// 移除存储
uni.removeStorageSync(key)// 清除所有存储
uni.clearStorageSync()13. 组件创建和使用 微信小程序 创建组件my-component.js Component({properties: {myProperty: {type: String,value: }},data: {innerValue: },methods: {myMethod() {// 方法实现}}
})使用组件在页面的 json 文件中 {usingComponents: {my-component: /components/my-component/my-component}
}在 wxml 中 my-component my-propertyvalue/my-componentUniApp 创建组件MyComponent.vue templateview{{myProperty}}/view
/templatescript
export default {name: MyComponent,props: {myProperty: {type: String,default: }},data() {return {innerValue: }},methods: {myMethod() {// 方法实现}}
}
/script使用组件在父组件中 templatemy-component :my-propertyvalue/my-component
/templatescript
import MyComponent from /components/MyComponent.vueexport default {components: {MyComponent}
}
/script14. 全局配置
微信小程序app.json{pages: [pages/index/index,pages/logs/logs],window: {backgroundTextStyle: light,navigationBarBackgroundColor: #fff,navigationBarTitleText: WeChat,navigationBarTextStyle: black},tabBar: {list: [{pagePath: pages/index/index,text: 首页},{pagePath: pages/logs/logs,text: 日志}]}
}UniApp pages.json:{pages: [{path: pages/index/index,style: {navigationBarTitleText: 首页}},{path: pages/logs/logs,style: {navigationBarTitleText: 日志}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: UniApp,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},tabBar: {color: #7A7E83,selectedColor: #3cc51f,borderStyle: black,backgroundColor: #
