# 第一个微信小程序开发 **Repository Path**: lml123321/wx001 ## Basic Information - **Project Name**: 第一个微信小程序开发 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2018-08-21 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 第一个微信小程序开发 ### 1.安装开发者工具,并注册APPID账号 #### 1.1下载链接: ``` https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18080318 ``` ### 2.微信小程序(应用)的基本知识 #### 2.1 结构 WXML - 不是HTMl - 遵循XML语法 ``` {{userInfo.nickName}} ``` - 常用标签 ``` 类似
类似 图片在开发小程序项目的时候: 1.记得设置宽高 2.设置缩放模式mode="aspectFill" 类似 类似 ``` - 组件 ``` 1.轮播图组件 ``` #### 2.2 样式 WXSS - rpx单位(responsive pixel 响应式的像素) ``` 基于750分辨率自动计算 设计稿也是基于750px的 1rpx物理分辨率---0.5px逻辑分辨率 ``` - 样式的导入 ``` import '*.wxcss' ``` #### 2.3行为 JS - ECMAScript标准 - 微信小程序不存在DOM和BOM的概念,但是微信封装了顶级对象:wx对象(window) #### 2.4 配置 *.json - 非常严格的json格式(“”,“”),只能用双引号 - app.json ``` pages:配置项目的页面路径 Windows:配置项目窗口表现 ``` ### 3.微信小程序文件结构 #### 3.1主体文件结构 主体部分由三个文件组成,必须放在项目的根目录,如下: | 文件 | 必填 | 作用 | | -------- | ---- | -------------- | | app.js | 是 | 小程序逻辑 | | app.json | 是 | 小程序公共设置 | | app.wxss | 否 | 小程序公共样式 | #### 3.2页面文件结构 页面由四个文件组成,分别是: | 文件类型 | 必填 | 作用 | | -------- | ---- | --------------------------------------------------- | | js | 是 | 页面逻辑(微信小程序没有window和document对象有wx) | | wxml | 是 | 页面结构(XML语法,不是HTML语法) | | wxss | 否 | 页面样式表(扩展了rpx尺寸单位,微信专属响应式像素) | | json | 否 | 页面配置(不能写注释,否则编译报错) | ### 4.页面功能说明 #### 4.1首页 ``` 首页轮播借助小程序自带轮播组件 请求地址为:https://locally.uieee.com/slides 备注:wx:request()发送资源请求时,需要在小程序开发者中添加好请求的域名,需在详情中勾选:不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书,但是后台会出现警告,当手机调试发现请求图片不显示时,需在image中加入lazy-load 懒加载属性 首页导航列表数据:利用flex弹性伸缩盒子布局,适应屏幕性效果增加 请求地址为:https://locally.uieee.com/categories ``` #### 4.2shoplists九宫格点击进入相应商品信息列表 ``` 思想:写一个pages多个页面重复调用,根据,利用每项的id不同,请求不同的数据渲染页面达到多个页面共同使用 ``` #### 4.3comments商品评论列表 ``` 难点:由于数据请求返回的数据没有过滤,需要分类,数组嵌套,详情见代码 ``` #### 4.4message 消息列表 #### 4.5profile个人中心 #### 4.6contact联系我们 ### 5 未完待续 记录自己的坑