柚子快报邀请码778899分享：arcgis 小程序笔记1
1：项目初始化 1.1：创建项目与项目初始化 a：创建项目 在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。 然后在右侧点击 [+] 开始新建项⽬。 最后在弹出的界⾯中输⼊项⽬相关的信息，点击确定即可。
b：项⽬初始化 （1）重置 app.js 中的代码。
（2） 删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。 （3）删除 app.wxss 中的代码。 （4）删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。 （5）删除 components 中的⾃定义组件。 （6）重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。 （7）更新 utils 下 util.js 的⽂件名为 formatTime.js。 1.2：⾃定义构建 npm + 集成Sass 随着项⽬的功能越来越多、项⽬越来越复杂，⽂件⽬录也变的很繁琐，为了⽅便进⾏项⽬的开发，开发 ⼈员通常会对⽬录结构进⾏调整优化，在慕尚花坊项⽬中， 我们就需要将⼩程序源码放到 miniprogram ⽬录下 。
a：⾃定义构建 （1）⾸先在project.config.json 配置 miniprogramRoot 选项，指定⼩程序源码的⽬录。
（2）然后配置 project.config.json 的 setting.packNpmManually 为 true。
（3）初始化项⽬。
（4）终端中输入 npm init -y （5）最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置。
（6）安装 vant ，然后进⾏ npm 构建 ，测试是否能够正常 vant 构建成功。 输入 npm i @vant/weapp （7）“⼯具”-“构建npm”。 b：集成 Sass （1）在 project.config.json ⽂件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ，即可开 启⼯具内置的 sass 编译插件。
（2）更改wxss后缀名为sass 三：构建项⽬⻚⾯
1.1.1navigator navigator是一个全局对象，它提供了与浏览器相关的信息和操作接口。在前端开发中，我们通常会使用 navigator 对象来获取用户浏览器的相关信息。 navigator 对象的常见属性和方法包括： navigator.userAgent: 返回当前浏览器的用户代理字符串。 navigator.appName: 返回当前浏览器的名称。 navigator.appVersion: 返回当前浏览器的版本号。 navigator.language: 返回当前浏览器的语言设置。 navigator.platform: 返回当前浏览器所在设备的操作系统平台。 navigator.geolocation: 提供了一组 API，用于获取当前设备的地理位置信息。 navigator.mediaDevices: 提供了一组 API，用于访问当前设备的音频、视频、屏幕等媒体设备。 navigator.serviceWorker: 提供了一组 API，用于在浏览器中注册和管理 Service Worker，实现离
1.2首页背景图
.index-container{ //首页背景图 .window-bgc{ height: 200rpx; position:absolute; width:100%; background-color: #f3514f; border-radius:0rpx 0rpx 40% 40%; } .adver { display: flex; margin:0 auto; width: 96%; padding: 18rpx; box-sizing: border-box; background-color:rgb(177, 54, 54); border-radius: 18rpx; .adver-left{ width: 50%; padding: 8rpx 8rpx 0rpx 8rpx; } .adver-right{ width: 50%; padding: 8rpx 8rpx 0rpx 6rpx; view:laat-child{ padding-top: 10rpx; } } image{ width: 100%; } } }
1.3 banner组件
Properties
(1)Properties类是专门用于读写配置文件的集合类
(2)配置文件的后缀名为.properties
(3)Properties类的方法可查找api文件
banner.json
1.4轮播图组件
在banner.wxml中通过swiper组件建立一个自动轮播列表
使用wx:for循环遍历bannerList数组
bannerList.length为数组长度
设置swiperbox样式
.swiperbox{ position: relative; .swiper{ height: 320rpx; //设置圆角弧度 border-radius: 18rpx; //设置溢出隐藏 overflow: hidden; width: 95%; //margin设置外边距 margin: 0 auto; } .swiper-item{ .img{ width: 100%; height: 100%; border-radius: 18rpx; } } .indicator{ display: flex; justify-content: center; position: absolute; bottom: 16rpx; left: 0rpx; right: 0rpx; .rectangle{ width: 30rpx; height: 6rpx; background-color: #f3514f; margin: 0 8rpx; border-radius: 6rpx; } } }
导航分类样式
.nav-list { //设置弹性布局 display: flex; //设置换行 flex-wrap: wrap; margin: 20rpx; border-radius: 18rpx; padding: 10px 0px 10px 10px; background-color: white; } .nav-item { .navigator-nav { //更改主轴方向 //由默认的横向排列更改为纵向排列 display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 10px; margin-top: 10px; .nav-text { margin-top: 4px; font-size: 12px; } .nav-img { width: 66rpx; height: 66rpx; } } }
柚子快报邀请码778899分享：arcgis 小程序笔记1
参考文章
发表评论