# miniprogram2023

**Repository Path**: ClassStudio/miniprogram2023

## Basic Information

- **Project Name**: miniprogram2023
- **Description**: web小程序+AI  2023 课程目录
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-09-16
- **Last Updated**: 2023-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WEB小程序+AI 设计与开发  
 CS社 Copyright 原创内容 未经允许不得随意转载 


小程序+AI课程4.0（2023下半年）
学生作品：![输入图片说明](https://images.gitee.com/uploads/images/2021/0517/184826_51609a1c_5695025.jpeg "学生作品.jpg")

## 青铜篇：

### 青铜篇I——自建一个同学个人主页：

#### HTML+CSS WEB标准协议 参考网站

1.   MDN web开发官方文档： https://developer.mozilla.org/zh-CN/docs/Web
2.  其他自学站点：https://www.w3school.com.cn/html/index.asp

#### 实验环境

1.  在线网页编辑器 https://www.runoob.com/try/try.php?filename=tryhtml_intro
2.   5分钟，完成你的个人主页主页
![输入图片说明](project/%E5%A4%A7%E9%A1%B9%E7%9B%AE%E4%B8%B4%E6%97%B6%E6%96%87%E4%BB%B6/zhangsan.jpg)
3.   图片（图床）https://x.yupoo.com   举例：张飞 http://pic.yupoo.com/classstudio/60622044/f18e9f89.jpg



### 青铜篇II——我的第一个带动态交互效果的主页：

#### JavaScript ES标准 参考网站

1.   MDN web开发官方文档：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/

2.   菜鸟教程：https://www.runoob.com/js/js-tutorial.html

#### 实验环境

1.  在线网页编辑器 https://www.runoob.com/try/try.php?filename=tryhtml_intro
2.  美化之前的作业作品。添加动态效果、插入视频。（弹窗和交互等）

## 白银篇：

### 白银篇I——小程序：生命计算器（输入框和按钮）：

1.   基础准备1微信小程序官方文档  https://developers.weixin.qq.com/miniprogram/dev/component/button.html

     基础准备2 以学号作为项目名称： G230101，建立空文件夹，并在微信开发工具里创建该项目（指定到桌面的学号文件夹内）

     基础准备3  根据老师样例，完成一个单页面的生命计算器
     ![Image description](https://images.gitee.com/uploads/images/2021/0406/144057_5f7e46f5_5695025.png "屏幕截图.png")

2.   设计部分： 主要在wxml+wxss:介绍VIEW布局（弹性盒子）、基础组件（文本text、输入框input、按钮button、进度条progress)、完成介绍设计

3.   逻辑部分： 主要在js: 给input添加监听输入getb和getd函数，获取出生年份和预期寿命信息。给button添加计算函数getr、

4.   提升部分： 添加可隐藏的提示语，比如“经计算你已经度过12000天，还剩5000天。

5.   **设计部分难点：通过弹性盒子来统一控制一个view识图中的布局 **
     ![Image description](https://images.gitee.com/uploads/images/2021/0406/144724_20a5af05_5695025.png "屏幕截图.png")
     [Link description](http://https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox)    

6.   **逻辑部分难点： 在UI组件上添加绑定，监听点击和输入事件。数据绑定{{data}}实现将JS数据透传给网页 this.setdata实时渲染新数据**

<!-- 
### 青铜篇I——自建一个介绍三国人物的静态网页：

#### HTML+CSS+JS WEB标准协议 参考网站

1.   MDN web开发官方文档： https://developer.mozilla.org/zh-CN/docs/Web
2.  其他自学站点：https://www.w3school.com.cn/html/index.asp

#### 实验环境

1.  在线网页编辑器
2.   5分钟，完成三国人物介绍主页
![输入图片说明](https://images.gitee.com/uploads/images/2021/0914/154153_63c578fb_5695025.png "屏幕截图.png")
3.   图片（图床）https://x.yupoo.com   举例：张飞 http://pic.yupoo.com/classstudio/60622044/f18e9f89.jpg
4.   视频教程： https://www.bilibili.com/video/BV1cb4y1D7cE

### 青铜篇II——自建一个带有JS交互能完成计算功能的网页：

#### JS自学站点
1. 菜鸟教程： https://www.runoob.com/js/js-tutorial.html
2. W3School: https://www.w3school.com.cn/js/js_htmldom_elements.asp

#### 实验环境
1. Typescript 在线编写工具： https://c.runoob.com/compile/5577/

## 白银篇：

### 白银篇I——小程序：生命计算器（输入框和按钮）：

1.   基础准备1微信小程序官方文档  https://developers.weixin.qq.com/miniprogram/dev/component/button.html

     基础准备2 以学号作为项目名称： G200101，建立空文件夹，并在微信开发工具里创建该项目（指定到桌面的学号文件夹内）

     基础准备3  根据老师样例，完成一个单页面的生命计算器
     ![Image description](https://images.gitee.com/uploads/images/2021/0406/144057_5f7e46f5_5695025.png "屏幕截图.png")

2.   设计部分： 主要在wxml+wxss:介绍VIEW布局（弹性盒子）、基础组件（文本text、输入框input、按钮button、进度条progress)、完成介绍设计

3.   逻辑部分： 主要在js: 给input添加监听输入getb和getd函数，获取出生年份和预期寿命信息。给button添加计算函数getr、

4.   提升部分： 添加可隐藏的提示语，比如“经计算你已经度过12000天，还剩5000天。

5.   **设计部分难点：通过弹性盒子来统一控制一个view识图中的布局 **
     ![Image description](https://images.gitee.com/uploads/images/2021/0406/144724_20a5af05_5695025.png "屏幕截图.png")
     [Link description](http://https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox)    

6.   **逻辑部分难点： 在UI组件上添加绑定，监听点击和输入事件。数据绑定{{data}}实现将JS数据透传给网页 this.setdata实时渲染新数据** 

### 白银篇II——微信小程序进阶(抽奖点名神器) （表单滑块）：


1.   基础准备1微信小程序官方文档  https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

     基础准备2 以学号作为项目名称： G200101，建立空文件夹，并在微信开发工具里创建该项目（指定到桌面的学号文件夹内）

     基础准备3  根据老师样例，完成一个单页面的抽奖或者抽号器
     ![输入图片说明](https://images.gitee.com/uploads/images/2021/0413/144800_4dc3d14b_5695025.png "屏幕截图.png")
2.   设计部分： 回顾VIEW布局 、基础组件（文本label、滑动条、按钮button) 完成页面设计

3.   逻辑部分：用监听函数得到起始数和终止数。最后用数据绑定和this.setdata来呈现将得到的随机数显示出来效果。
     
4.   红BUFF难点： **如何实现从指定两个整数之间的随机数**  JS实现方法：https://www.cnblogs.com/wenxuehai/p/10285585.html  

     需要注意如何在JS中调用自定义的函数的方法。

     蓝BUFF重点：如何将结果摇号结果保留在一个数组中？https://blog.csdn.net/woshidamimi0/article/details/81154670

5.   提高篇：  
              （1） **加入一个radio来判定是否保留**   

              （2） **加入输入框，可自定义摇号范围**  

              （3） ** 如何实现随机数变化的动态效果？ **  

              （4） **能不能实现已文件形式导入摇号名单**

6.   来个提示框：弹窗（toast) https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

7.    有问题找组织：社区大家来帮忙  https://developers.weixin.qq.com/community/homepage

### 白银篇III——微信小程序深入((历史上的今天) 时间选择器和 API：

1.   前言：你的生辰是否是历史上某个重要时刻。今天我们来做一款历史上的今天 小程序。
     在手机等移动终端上输入的时候，由于缺少物理键盘，想要输入日期是非常麻烦的。因为小程序提供了时间选择器组件。
     通过页面获取到选择的日期数据后，用互联网上的API服务接口获得对应日期的历史重大事件数据。

2.   基础准备1微信小程序官方文档  https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

     基础准备2 以学号作为项目名称： G200101，建立空文件夹，并在微信开发工具里创建该项目（指定到桌面的学号文件夹内）

     基础准备3  根据老师样例，完成一个单页面的 历史上的今天 的小程序
![输入图片说明](https://images.gitee.com/uploads/images/2021/0508/151108_9b46b3d0_5695025.gif "0.gif")

2.   设计部分：  基础组件（文本text、选择器picker) 最后使用弹性布局完成页面设计

3.   逻辑部分：用监听函数bindchange得到选择的日期。用数据绑定呈现在页面上，最后将数据输出到。
     
4.   红BUFF难点： **如何从API服务商抓取数据**  实现方法：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
     使用微信小程序的API里的wx.request

     蓝BUFF重点：申请一个互联网API服务：

5.   提高篇：  ** 用Python自己写一个API服务，涉及到申请域名、备案、租用计算资源等** 

### 白银篇IV——微信小程序深入(定制地图2.0 )：

前言：腾讯地图的坐标选取方法：https://lbs.qq.com/tool/getpoint/index.html

map使用方式的官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

wxml: 加入地图组件


    <map

      id="myMap"

      style="width: 100%; height: 500px;"

      latitude="{{latitude}}"

      longitude="{{longitude}}"

      markers="{{markers}}"

    >

    map>
js: 修改页面初始值，传入经纬度和坐标数据

  data: {

    latitude: 40.009600,

   longitude: 116.320650,

    markers: [{

      id: 1,

     latitude: 40.009600,

     longitude: 116.320650,

      name: '测试'

    }],

  },
2.新建项目，在桌面上，学号命名，然后编辑 app.json 页面路径设置为：pages/g2000 注意不写逗号。

3.重点代码参考：在js代码中最上面加入多边形点坐标

var local1= [{

latitude: 40.010615,

longitude: 116.318886,

}, {

latitude: 40.010886,

longitude: 116.322330,
}, {

latitude: 40.008420,

longitude: 116.322631,

},{

latitude:

longitude:

}]
4.在js的data中加入多边形的参数：

polygons: [ {

points: local1,

fillColor: "#FF003222",

strokeWidth: 1,

strokeColor: "#AACC33",

}],
5.选取地图位置，注意经纬度，和点的顺序。注意地图的角度（是不是斜的，如何解决）？ 能不能实现3D？

用滑动条实现地图缩放 参考代码，看看加在哪里

var that = this

that.setData({

zoom: zoom

})
6.点击按钮移动到我的当前位置， 参考代码，看看加在哪里

onReady: function (e) {

this.mapCtx = wx.createMapContext('myMap')

},

moveToLocation: function () {

this.mapCtx.moveToLocation()

}
-->