01-小程序(开发流程,数据绑定,注册事件,this,导入导出用es6模块化)

01.如何开发微信小程序

传送门

微信小程序发布就是发布到微信服务器上，免费的

1. 注册
2. 小程序信息完善
3. 开发小程序
   1. 微信开放文档
   2. 微信开发者工具
4. 提交审核和发布

h5页面如果想让外网访问到，必须放到有公网IP的服务器上，可能配置域名

02.注册小程序账号及信息完善

微信公众平台

1. 账号信息
   1. 邮箱必须是没有绑定过其他公众账号的，或者没有绑定到个人微信的
2. 邮箱激活
   1. 打开邮箱点击链接
3. 信息登记
   1. 主体类型，选择个人
      1. 其他类型需要认证的
   2. 微信扫码
      1. 你的微信就是小程序账号的管理员
4. 小程序信息完善

   1. 小程序名称

   2. 头像

   3. 服务类目

      1. 尽量选择工具->信息查询
5. 找到你的AppID
   1. 开发->开发设置-> 开发者ID

注意点

1. 小程序是属性微信公众平台的里面一种
2. 小程序名称不取心灵鸡汤，或者商城
   1. 心灵鸡汤的话，可能审核不通过
   2. 商城需要企业类型才可以
3. 服务类目不要选择小游戏

03.微信开发者工具安装及使用

微信开发者工具

1. 下载安装微信开发者工具

   1. 选择稳定版本

2. 新建小程序

3. 预览手机扫码

注意点：

1. 如果预览是灰色的话，appId是不对

   1. 详情->修改，填写你的正确的appid

2. 在新建界面上，下拉方便找最近使用appid

3. 新建项目也可以使用测试号，无法上传的

04.认识微信开发者工具

传送门

微信开发者工具本质是有一个chrome内核的

05.小程序文档介绍

传送门

1. 入口
   1. 编译器里面微信开发工具->帮助->开发者文档
2. 怎么看文档
   1. 如果想找小程序原理相关的，找指南,框架
   2. 如果想找结构，找组件
   3. 如果想找方法，找API

06.小程序项目结构

小程序是运行在微信提供的浏览器里面

小程序项目结构类似于vue-cli生成项目结构

​ 1. 小程序管理着多个页面

说明：

1. app.js全局逻辑，小程序入口

   1. 先忽略，不用改

2. app.json

   1. pages属性是一个页面路径的数组，类似于vue-cli路由配置
      1. app.json里面pages数组的第一个路径就是模拟器显示的默认页面
   2. window是全局的窗口样式

3. app.wxss全局的样式

4. project.config.json项目配置相关,包括appid

5. pages包含所有页面

   1. 页面pages/页面/页面名.*

      1. 页面名.js是逻辑，语法很类似于vue
      2. 页面名.json配置
      3. 页面名.wxml就是结构，小程序组件当标签使用
      4. 页面名.wxss样式，基本上css都可以使用

注意点

1. 小程序页面里面，四个文件的名是一样的，只不过扩展名不一样。
2. 四个文件名最好和页面名字保持一致

07. 基本标签的使用

组件

小程序结构里面只能使用小程序组件，把组件当标签使用即可

1. text显示文本，相当于是html span标签
2. view包裹作用，相当于html div标签
3. image显示图片
   1. 有固定的宽高，实际项目里面一定设置宽高
4. button按钮
   1. size="mini"表示小尺寸的

注意点：

1. 新建页面的方法，在app.json pages数组里面复制一个路径，会自动生成页面。
   1. 路径最好放在数组的第一个(模拟器就显示该数组的第一个页面)

08.图文混排案例

wxml结构代码:

wxss样式代码:

.goods {
  display: flex;
  width: 234px;
  height: 324px;
  border: 1px solid #ccc;
  /* 修改主轴方向为从上往下 */
  flex-direction: column;
  align-items: center;
  padding: 0 22px;
  box-sizing: border-box;
}
image {
  width: 150px;
  height: 150px;
  margin: 30px 0 44px;
}
.txt {
  color: #666;
  //txt文本只显示两行并且多余的部分用省略号
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.price {
  color: #e1251b;
  font-size: 12px;
  /* width: 100%; */
  align-self: flex-start;
  margin-top: 14px;
}
.num {
  font-size: 20px;
}

注意点:

1. flex布局

   .goods{
       display:flex; //flex布局
       flex-direction:column; //子元素垂直方向排列
       align-item:center; //子元素水平居中
   } 
   .goods .price{
       //单独设置某个子元素次轴对齐方式,设置该元素居左
    align-self:flex-start;   
   }
   

09.数据绑定

传送门

数据绑定使用 Mustache 语法（双大括号）将变量包起来

1. 文本渲染

   <text>{{msg}}</text>
   

2. 属性绑定

   <image src="{{imgUrl}}"></image>
   
   

3. 条件判断

   1. wx:if, wx:else指令固定写法
   2. wx:if条件成立的话，就渲染dom，否则就移除

   <view wx:if="{{isHandsome}}">帅</view>
   <view wx:else>丑</view>
   

4. 列表渲染

   1. wx:for固定写法
   2. item是默认的元素别名，index是默认的索引别名
   3. wx:for-item指定元素别名

   <view wx:for="{{movieList}}">
     {{item}}--{{index}}
   </view>
   

注意点：

1. data属性在结构中使用，全部是用{{}}
2. 调试器AppData相当于是chrome vue devtools，方便调试，可以看到页面data属性，也可以改。
3. wx:for也可以针对值范围

10.注册事件及消息提示框

指南小程序框架里面事件绑定

API里面消息提示框

1. 事件绑定

   1. 在注册事件所在的dom上

      <button bind事件名="事件处理方法">点我呀</button>
      

   2. 在js文件中，声明事件处理方法

      Page({
          data(){
              
          },
          事件处理方法(){
              
          }
      })
      

2. 消提示框

   wx.showToast({
       title: '登陆成功',
       // icon:'loading'
       icon:'none', //图标
       duration:3000,　//显示时长
       // 是否显示遮罩层，有遮罩时，无法点击遮罩以下
       mask:true
   })
   

注意点：

1. 小程序的API基本上都是由wx对象
2. 事件名有很多，最常见的是tap事件

11.方法中的this

传送门

1. 方法this访问方法的话，this.方法名

2. 方法this访问data属性的话，this.data.属性名

3. 如果想改变data属性的话

   this.setData({
       isRed:!this.data.isRed
   })
   

12.图片切换-静态页面

13.图片切换-逻辑

点下一张，显示下一张图片，如果是最后一张，就去到第一张;同理上一张

1. 先显示图片
   1. 数组存放多张图片 imgArr:[图片1，图片2，图片3.。。]
   2. 下标index
   3. 显示 image src="{{imgArr[index]}}"
2. 点击上一张，显示上一张;点击下一张时，显示下一张
   1. 点击下一张bindtap:next
      1. next index+1
   2. 同理
3. 如果当前是最后一张，点击下一张时，跳到第一张; 如果当前是第一张，点击上一张时，跳转到最后一张
   1. 先判断，再++或者再–

注意点：

1. 路径/代表项目根目录

14.模块化

传送门

有一些公共的逻辑需要抽取出来，模块化

小程序模块化推荐直接使用ES6模块化即可

function sayHello(){
  console.log('你好呀')
}

// 暴露接口
export default sayHello

// 引入sayHello
import sayHello from '../../utils/hello' 

注意点

1. import路径只支持相对路径

15.git复习

16.git克隆支持两种协议，https和ssh

如何生成公钥和添加公钥

1. https在提交或者推送时需要输入用户名和密码
2. ssh在提交或者推送时需要不输入用户名和密码，需要配置一个ssh 公钥然后把公钥放在gitee后台上去,让自己电脑的私钥与之配对,再用ssh克隆就可以了

一般公私钥就存在该文件夹里面

17.ssh克隆

1. 选择一个空的文件夹(到时候空隆下来的东西都会放在这个目录文件夹下)，克隆

   git clone git@gitee.com:xxx/xxx.git
   

2. 去到learnmp, 切换分支

   cd learnmp
   git checkout mp50
   

注意点：

1. cd 切到某目录

2. ls查看当前目录下所有的文件及文件夹