# miniProgram

**Repository Path**: jameswatt2008/mini-program

## Basic Information

- **Project Name**: miniProgram
- **Description**: 原生小程序开发
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-18
- **Last Updated**: 2025-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小程序开发

原生程序开发--微信小程序开发

跨端小程序开发--



微信提供的开发框架--开发  html，css，js



![1755482412498](README.assets/1755482412498.png)



项目结构

![1755482884680](README.assets/1755482884680.png)



一个微信小程序页面

![1755483033093](README.assets/1755483033093.png)



## 微信小程序中新建页面

pages下面新建一个文件夹--新建一个page

![1755485717417](README.assets/1755485717417.png)



## app.json中pages配置项

配置小程序中所有页面的页面路径。

数组中第一个页面，会在打开小程序以后自动展示

![1755485638944](README.assets/1755485638944.png)



## app.json配置tabbar

![1755486410962](README.assets/1755486410962.png)



## 练习 

新建四个页面，首页，购物车，分类，我的  配置tabbar



## 全局和页面配置 导航条

![1755499460152](README.assets/1755499460152.png)



## rpx单位

小程序屏幕宽度是被分成了 750份，

1rpx 就是屏幕宽度 1/750  



设计稿宽度 375px ， 设计稿中 1px 要变成 2rpx

设计稿宽度  750px ， 设计稿中 1px 要变成 1rpx



蓝湖中，屏幕宽度可以自己修改

![1755503722682](README.assets/1755503722682.png)





## 插值语法-属性绑定

![1755504670281](README.assets/1755504670281.png)









## 列表渲染

![1755505203193](README.assets/1755505203193.png)



![1755505190453](README.assets/1755505190453.png)



## 条件渲染

![1755505606670](README.assets/1755505606670.png)





![1755505744378](README.assets/1755505744378.png)



## 添加点击事件

![1755506099005](README.assets/1755506099005.png)



loginClick 不能加小括号



## 点击事件传参

![1755506708442](README.assets/1755506708442.png)



## setData

![1755507344274](README.assets/1755507344274.png)



## 获取输入框的值-属性绑定和事件监听



![1755567330293](README.assets/1755567330293.png)



## 简单的双向绑定

![1755567698650](README.assets/1755567698650.png)



# 作业

todolist--本地版本  

列表

删除

发布

修改



作业  使用蓝湖生成小程序首页代码-列表数据改成 循环产生-数组自己定义





## 小程序开发工具的调试工具-观察data的值

![1755569195319](README.assets/1755569195319.png)





## 自定义组件

![1755586156697](README.assets/1755586156697.png)

注册组件

![1755586178526](README.assets/1755586178526.png)

使用

![1755586206532](README.assets/1755586206532.png)

## 组件的属性



传入属性，组件内部定义属性

![1755587138785](README.assets/1755587138785.png)

利用组件的生命周期，把传入的属性值给到 组件内部的状态变量上

![1755587155694](README.assets/1755587155694.png)



## 组件的事件

使用子组件的使用-绑定事件（事件名自己定义）

```
<!-- 监听按钮的 numChange事件 -->
<MyButton title='登录' bind:numChange="numFn"></MyButton>
```



![1755587729930](README.assets/1755587729930.png)

组件内部适当的时候触发(onChange)

```
this.triggerEvent("numChange",'组件内部改变了')
```



![1755587763222](README.assets/1755587763222.png)

## 组件的插槽



![1755587925820](README.assets/1755587925820.png)



具名插槽

![1755588045304](README.assets/1755588045304.png)



## 整体的生命周期

![1755591117617](README.assets/1755591117617.png)



## 小程序的生命周期

![1755591140960](README.assets/1755591140960.png)

## 页面的生命周期

onload --> 发起ajax请求--获取路由参数

onShow--》发起ajax请求





![1755591166707](README.assets/1755591166707.png)





![1755591178166](README.assets/1755591178166.png)



## 下拉刷新

![1755591371816](README.assets/1755591371816.png)





![1755591566734](README.assets/1755591566734.png)





## 上拉加载

![1755591714210](README.assets/1755591714210.png)

## 小程序中发起ajax请求

接口文档 http://47.94.6.186:3001/apidoc/



小程序-开发和线上-发起的请求必须，在小程序中开发管理 配置合法域名

![1755591929879](README.assets/1755591929879.png)



开发 中，如果临时测试开始，可以勾选开发者工具-详情-本地设置-不校验合法域名-勾选上（如果上线，必须让公司提供一个合法域名和https接口地址）

![1755592024817](README.assets/1755592024817.png)





```

wx.request({
      // 请求地址-接口地址-后端提供的，需要看接口文档
      // 请求的地址，需要在开发者平台，设置一下，才能在小程序中使用-否则会报错
  url: '请求地址',
  method: '',
  
  header: {},
  
  data: {  // 不管get或post都用这个传递 -get请求，这里自动就是转为搜索参数，其他请求都会自动转为请求头
    x: '',
    y: ''
  },
  
  // success (res) { /// 脚下留心：存在this指向问题 导致不能用this.setData
  success: res =>
    console.log(res.data)
  },
  fail: err => {}
})
```



![1755592656579](README.assets/1755592656579.png)





## 上传文件

```
 wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths);
        //获取图片的本地路径（在微信内部的一个路径）
        let filePath = tempFilePaths[0]
        wx.uploadFile({
          header:{},
          filePath: filePath,//本地的普通路径
          name: 'img',//看接口文档 参数名
          // http://47.94.6.186:3001/apidoc/#api-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87-UploadImage
          url: 'http://47.94.6.186:3001/api/file/upload',
          success:res=>{
            console.log(res.data);
            let obj = JSON.parse(res.data)
            console.log(obj);
            let imgUrl = 'http://47.94.6.186:3001/'+obj.fileUrl
            console.log(imgUrl);
          }
        })

      }
    })
```





## 练习

首页-商品列表-轮播列表--商品列表加载更多 



作业1-接口版本的todolist





## 路由-列表进详情

![1755659071135](README.assets/1755659071135.png)

详情页面，获取路由传递的参数

![1755659188283](README.assets/1755659188283.png)



返回

![1755659293858](README.assets/1755659293858.png)

跳转到tabar页面

![1755659529564](README.assets/1755659529564.png)





## 本地存储



![1755671734071](README.assets/1755671734071.png)



读

![1755671744678](README.assets/1755671744678.png)



## 小程序的 全局数据

设置全局数据的初始值

![1755672441802](README.assets/1755672441802.png)



修改和获取全局数据



![1755672514392](README.assets/1755672514392.png)





## 小程序项目

1-新建本地小程序项目

2-项目使用git初始化本地仓库

3-新建远程git仓库，把本地和远程关联



https://gitee.com/jameswatt2008/mini-mall