微信小程序(第三天笔记)

本节知识要点:

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

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

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

二、小程序数据绑定

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

绑定数据的形式:字符串,数值,数组

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

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

例如:

  <view class="goods-list">
            <view class="border_bottom" 
                   wx:for="{{ list  }}"
                   wx:for-index="要改的下标名称"
                   wx:for-item="要改的项的名称"
            >
                <view>商品编号:<text>{{ id+1 }}</text></view>
                <view>商品名称:<text>{{ item.name }}</text></view>
                <view>商品价格:<text>{{ item.price }}</text></view>
            </view>
           
        
 </view>


 注:通过
      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的取反

例如:

    <view wx:if="{{ 布尔值  }}">  //满足条件,渲染的内容  </view>

    <view wx:else>不满足条件显示的内容</view>

五、小程序事件绑定

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

例如:   <view bindtap="要触发的方法名">点我</view>

六、小程序页面如何传参

两种方式:

第一种:通过自定义属性传参 例如: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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,770评论 1 45
  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 13,860评论 0 3
  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,439评论 0 0
  • 上了一天的课,迎来了几个体验课的孩子,发现现在的有些父母只是为了省点钱,而让孩子去不同的地方上体验课,殊不知,这无...
    修行的柠檬阅读 153评论 0 1
  • 那天去裁缝店改一条我在淘宝上买的长裙,裙子长到了脚踝,我嫌它太啰嗦,穿上行动不便,所以打算让老板给我截去...
    老行你好阅读 1,133评论 7 10