微信小程序（第三天笔记）

本节知识要点：

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

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