一、本期要点：

1.学会注册小程序帐号
2.安装小程序开发者工具
3.创建小程序项目
4.熟悉小程序目录结构
5.小程序hello world

要点1：学会注册小程序帐号

打开：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=〈=zh_CN

注册完登录小程序后台：开发-开发者设置--AppID(小程序ID) wxf4be8f9be8e111a2

要点2：下载并安装小程序开发者工具

下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

要点3.创建小程序项目

  打开安装好的微信web开发者工具，点击+创建小程序项目，添加项目名称，指定小程序目录和appid-->点击创建

4.熟悉小程序目录结构

   pages目录：是你平时干活的目录  相当于vue中的src
   utils目录：存放平时封装的一个工具目录 例如：封装ajax等

   app.js:小程序入口  相当于vue中的main.js
   app.json:小程序的全局配置
   app.wxss:是小程序的全局样式
   project.config.json 小程序项目的环境设置，通常不动

要点5.小程序hello world（创建页面）

  一个小程序页面包括的文件类型：

     以pages中的index目录为例：

       index.js:页面的js逻辑
       index.json：当前页面的配置
       inex.wxml：页面模板  相当于html
       index.wxss: 页面样式，相当于css

一、重温小程序如何创建页面

1.手动建立

2.批量建立：

右键pages->创建目录

右键在创建的目录->新建page->命名并回车

二、小程序数据绑定

通过在data:{}中添加数据，通过在wxml页面中添加{{ }}来绑定数据

绑定数据的形式：字符串，数值，数组

三、小程序数据遍历和判断

数组如何遍历：通过wx:for，通过item添加每一项，通过index添加索引

例如：

商品编号：{{ id+1 }}

商品名称：{{ item.name }}

商品价格：{{ item.price }}

四、小程序css选择器

小程序css选择器只能使用：class,id

一、重温小程序如何创建页面

1.手动建立
2.批量建立：

右键pages->创建目录
右键在创建的目录->新建page->命名并回车

二、小程序数据绑定

通过在data:{}中添加数据，通过在wxml页面中添加{{  }}来绑定数据

绑定数据的形式：字符串，数值，数组

三、小程序数据遍历和判断

数组如何遍历：通过wx:for，通过item添加每一项，通过index添加索引

例如：

  商品编号：{{ id+1 }}商品名称：{{ item.name }}商品价格：{{ item.price }}

 

 注：通过
      wx:for-index="要改的下标名称"
      wx:for-item="要改的项的名称"

   不改默认每一项的名称：item,
   不改默认每一项的索引：index

四、小程序css选择器

小程序css选择器只能使用：class,id,标签（例如：view,text）,群组,:after,:before

五、条件渲染

小程序支持的条件渲染：wx:if,hidden 两种

  wx:if 相当于vue中v-if，满足则创建出来，不满足删除

  hidden 相当于vue中的v-show的取反

例如：

      //满足条件，渲染的内容  

    不满足条件显示的内容

五、小程序事件绑定

格式： <标签 bind事件类型="要触发的方法名">文本

例如：   点我

六、小程序页面如何传参

两种方式：

第一种：通过自定义属性传参 例如：data-自定义属性名="值"
第二种：通过路由跳转传参

七、小程序页面如何跳转

wx.navigateTo({
url: 'test?id=1'
..

注：如何动态改变小程序的标题（即title）

    第一种：手动修改
    第二种：用程序修改

八、小程序如何获取后台数据 ****************

后台返回格式：json

交互方式：

 1.js原生  XMLHttpRequest()
 2.jQuery: $.ajax({  }),$.get(),$.post(),$.getJSON()
 3.Vue: axios
 4.React: fetch
 5.微信小程序：wx.request({  })  和jQuery的$.ajax()类似

 注意：

    1.小程序通常不支持本地的JSON文件，通常放在线上的一个真实地址
    2.小程序线上接口地址必须是  https://xxxxx.como/api/goods.json

git网站静态化，可以像买了域名和空间的网站一样

 用git将本地代码
 先推送到线上gitee pages-启用

 配置小程序后台线上域名即白名单 

开发-服务器域名

request合法域名 ：https://wxw666.gitee.io

1.小程序如何遍历

wx:for="{{ 要遍历的数组名 }}"

2.小程序如何实现条件渲染

wx:if,hidden

3.小程序如何绑定事件

点我

例如：点我

4.小程序如何跳转页面

wx.navigatorTo({

url:'要跳转的地址'

})

5.小程序两个页面之间如何传参

传参：通过自定义属性配合 wx.navigatorTo

接参：在另一个要接收的页面通过onLoad中的options来接收

=================================================================

本节要点：

1.再一次讨论页面跳转

2.小程序的钩子函数

3.小程序的UI组件

4.小程序的生态圈

一、再一次讨论页面跳转

跳转方式有两种：类似vue的两种方式

第一种：标签方式（navigator） 类似于vue-router中的router-link

第二种：js方式（有4个）

  **** wx.navigateTo(Object object)
   wx.switchTab(Object object)
   wx.redirectTo(Object object)
   wx.reLaunch(Object object)

二、小程序的钩子函数

三、小程序的UI组件

1.轮播组件：swiper

2.switch：开关

3.picker：普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器

一、小程序实现自定义组件

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程

第一步：创建一个components文件夹

  内部创建要复用的组件,例如：Dialog

  右键新建Dialog目录->右键新建component并生成四个文件

第二步：如何在其他页面引入刚才创建的Dialog组件

参考资料：

https://www.jianshu.com/p/8a2a730d9e60/

二、在小程序中如何mock数据

（一）在小程序中使用mock数据的步骤：

第一步：下载文件：mock.js,wxmock.js并引入到utils目录中

第二步：创建接口文件，即要请求的模拟数据接口 例如：user.js

在utils下创建一个user.js文件，生成要用的模拟数据，例如：

     //引入基于小程序的wxmock
     var Mock = require('../WxMock.js')

     //基于ajax请求地址的模拟数据

     //格式： Mock.mock('请求地址',数据模板)

     var users=Mock.mock('https://1608A.com/users', {
     "codeText":"成功返回",
     "code": 200,
     "data|1-20": [
        {
           "name": function () {
           return Mock.Random.cname()
           },
           "lastLogin": function () {
           return Mock.Random.datetime()
           }
        }
     ]
     })
     var del=Mock.mock('https://xxx.com/user/delete', {
     "code": 200,
     "message": "s删除成功"
     })

     //请求文章列表
     var article=Mock.mock('http://www.baidu.com/getArticle',{

        "code":666,
        "successText":"成功返回",
        "content":[
           {"id":1001,"name":"文章标题","content":"文章内容"},
           {"id":1002,"name":"文章标题222","content":"文章内容222"}
        ]

     })

     export default {
        users,
        del,
        article
     }

第三步：使用接口渲染数据（即：在需要请求的页面中用wx.request()来请求需要的数据）

     wx.request({
        url:'http://www.baidu.com/getArticle',
        success:function(res) {
              console.log('我在购物车页面我得到的数据：',res)
        }

     })

（二）如何生成mock数据

  1.生成序列

  Mock.mock({
  "number|+1": 202
  })

参考资料：
作者：刘松阳
链接：https://www.jianshu.com/p/bc3996c30d6c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。