集团网站建设新闻,杭州酒店网站建设,怎么做自己的购物网站,柳州做网站seo哪家好文章目录 1#xff09;uni-ui组件库的使用2#xff09;项目打包1#xff1a;微信小程序打包2#xff1a;h5打包3#xff1a;安卓打包 本博客为 uni-app 此门课的跟学笔记#xff0c;目的是便于个人复习和对知识快速索引#xff0c;源码素材可在均可在视频评论区找到 1uni-ui组件库的使用2项目打包1微信小程序打包2h5打包3安卓打包 本博客为 uni-app 此门课的跟学笔记目的是便于个人复习和对知识快速索引源码素材可在均可在视频评论区找到 1uni-ui组件库的使用
推荐在新建项目的时候把项目新建成uni-ui项目这样uni-ui中的所有组件都会被打包到node_modules中直接引用即可就不需要在官网中去下载插件了 这里模拟做一个商品导航栏在uni-ui中是uni-goods-nav组件
必要前提工作从uni_modules中引入uni-goods-nav.vue模块并且在components注册该组件
script// 导入再注册然后直接uni-goods-nav引用即可import uniGoodsNav from ../../uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vueexport default {data() {return {// 注册该组件components: {uniGoodsNav},}}
/scriptuni-ui组件库例程链接uni-app官网 (dcloud.net.cn) 在官方例程中找到对应的使用方法添加必要的属性值和方法 完整代码
templateview classgoods_detail!-- 基于uni-ui库开发就是简单嗷 --view classgoods_navuni-goods-nav :filltrue :optionsoptions :buttonGroupbuttonGroup clickonClickbuttonClickbuttonClick //view/view
/templatescript// 导入再注册然后直接uni-goods-nav引用即可import uniGoodsNav from ../../uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vueexport default {data() {return {// 商品底部导航栏options: [{icon: headphones,text: 客服}, {icon: shop,text: 店铺,info: 2,infoBackgroundColor: #007aff,infoColor: red}, {icon: cart,text: 购物车,info: 2}],buttonGroup: [{text: 加入购物车,backgroundColor: #ff0000,color: #fff},{text: 立即购买,backgroundColor: #ffa200,color: #fff}]}},methods: {// 商品导航栏的(客服/店铺/购物车)onClick(e) {console.log(e); // 打印事件会发现,区分点击事物在于indexuni.showToast({title: 点击${e.content.text},icon: none})},// 商品导航栏的(加入购物车/立即购买)buttonClick(e) {console.log(e) // 打印事件会发现,区分加入购物车和立即购买在于indexthis.options[2].info}},components: {uniGoodsNav}}
/scriptstyle langscss/style2项目打包 在项目开发完成后我们要对项目进行打包和上传 1微信小程序打包
首先在项目的manifest.json中设置微信小程序AppID AppID需要在微信公众平台上申请首先需要注册一个小程序 注册完成后在开发板块拿到自己的AppID复制回项目的manifest.json对应区域 将项目在微信开发者工具中打开直接点击上传即可注意字体图标是无法被打包上去时所以在真正开发时字体图标建议换成线上 当然如果小程序要真正上线使用的话接口地址应该替换为云上服务器的接口地址这里用本地后端接口地址仅用于演示 再于微信开发者平台配置服务器域名即可 上传成功后在微信开发平台的版本管理板块中可以看到自己上传的版本信息如果要上传使用则点击提交审核注意如果写的项目只是一个demo而不是一个完整的可运行的项目建议不要频繁提交审核因为审核会消耗一定的官方资源频繁审核导致会造成信用上的问题 2h5打包
相对简单在manifest.json中设置页面标题和路由模式 随后直接发行即可 项目会先打包在本地在该目录cmd下输入指令npm i g live-server 再输入指令npx live-server --port3000 在端口3000启动项目 3安卓打包 同样在manifest.json中进行配置基础配置到web配置之前都是App的配置我们一个一个看 基础配置配置APP的基础描述信息 App图标配置图标只能选择png格式点击自动生成所有图标并替换可以生成各分辨率的图标并且在软件中都采用同一个 配置App启动图如登录微信时月亮小人的背景图 用到了什么模块就勾选什么模块比如项目中有点击拨打电话自动复制电话号码跳转到通讯录的功能则勾选通讯录 其他几个配置视情况而定 配置完成后发行→原生APP云打包 apk会打包到unpackage的release目录下找到安装包即可发送到手机安装
