文化宣传 加强网站建设 创办网站,周口市网站建设,做网站要会写代码吗,青岛商务学校网站建设uniapp的介绍可以看官网#xff0c;接下来我们使用uniapp创建小程序和H5界面#xff0c;其他小程序也是可以的#xff0c;只演示创建这2个#xff0c;其实都是一套代码#xff0c;只是生成的方式不一样而已。 uni-app官网
1.打开HBuilder X
选择如图所示#xff0c;下…uniapp的介绍可以看官网接下来我们使用uniapp创建小程序和H5界面其他小程序也是可以的只演示创建这2个其实都是一套代码只是生成的方式不一样而已。 uni-app官网
1.打开HBuilder X
选择如图所示下面选择Vue3 2.创建完成后
和我们创建的PC页面程序结构差不多只是多了uni.scss这些文件都是配置文件主要的页面就是在pages文件夹下面 3.我们使用自带的UI控件
这里说的UI控件就是类似于ElementPlus一样自带的控件是uni开头的我们也可以叫它原生UI网站可以查看具体组件的用法组件使用的入门教程 | uni-app官网
补充其中uni-ui是基础组件的补充组件所以分2部分其实都是一回事如果创建的是uni-ui项目模板那么就可以一起使用不用引用了否则就要单独去引用和PC页面同理。
index.vue中代码
这里非常的简单只需要增加代码就行了不需要各种引用了
templateview classuni-containeruni-section title基本用法 typelineview classexample!-- 基础用法不包含校验规则 --uni-forms refbaseForm :modelValuebaseFormDatauni-forms-item label姓名 requireduni-easyinput v-modelbaseFormData.name placeholder请输入姓名 //uni-forms-itemuni-forms-item label年龄 requireduni-easyinput v-modelbaseFormData.age placeholder请输入年龄 //uni-forms-itemuni-forms-item label性别 requireduni-data-checkbox v-modelbaseFormData.sex :localdatasexs //uni-forms-itemuni-forms-item label兴趣爱好 requireduni-data-checkbox v-modelbaseFormData.hobby multiple :localdatahobbys //uni-forms-itemuni-forms-item label自我介绍uni-easyinput typetextarea v-modelbaseFormData.introduction placeholder请输入自我介绍 //uni-forms-itemuni-forms-item label日期时间uni-datetime-picker typedatetime return-typetimestampv-modelbaseFormData.datetimesingle //uni-forms-item/uni-forms/view/uni-sectionview classgoods-cartsuni-goods-nav :optionsoptions :filltrue :button-groupbuttonGroup clickonClickbuttonClickbuttonClick //view/view
/template
scriptexport default {components: {},data() {return {baseFormData: {name: ,age: ,introduction: ,sex: 2,hobby: [5],datetimesingle: 1627529992399},options: [{icon: chat,text: 客服}, {icon: shop,text: 店铺,info: 2,infoBackgroundColor: #007aff,infoColor: #f5f5f5}, {icon: cart,text: 购物车,info: 2}],buttonGroup: [{text: 加入购物车,backgroundColor: linear-gradient(90deg, #FFCD1E, #FF8A18),color: #fff},{text: 立即购买,backgroundColor: linear-gradient(90deg, #FE6035, #EF1224),color: #fff}]}},onLoad() {},methods: {onClick(e) {uni.showToast({title: 点击${e.content.text},icon: none})},buttonClick(e) {console.log(e)this.options[2].info}}}
/scriptstyle langscss.example-body {padding: 0;/* #ifndef APP-NVUE */display: block;/* #endif */}.goods-carts {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: column;position: fixed;left: 0;right: 0;/* #ifdef H5 */left: var(--window-left);right: var(--window-right);/* #endif */bottom: 0;}.example {padding: 15px;background-color: #fff;}.segmented-control {margin-bottom: 15px;}.button-group {margin-top: 15px;display: flex;justify-content: space-around;}.form-item {display: flex;align-items: center;}.button {display: flex;align-items: center;height: 35px;margin-left: 10px;}
/style4.生成H5页面
如图所示选择一个浏览器即可 5.效果 6.生成微信小程序
首先打开 微信开发者工具 把服务端口打开否则会报错。 然后如图所示 7.效果
此时HBuilder X会自动打开 微信开发者工具 速度可能慢如果打开后报错了那么关闭再试一次就正常了 我们只需要在HBuilder X上写代码自动会热重载更新代码这样就不需要在微信开发者工具上面写代码了把它当做一个浏览器的功能即可。
