微信小程序复习一

1.环境安装，vscode需要的插件如下:
1.1.vscode中，先搜索安装vscode weapp api，这是小程序的语法结构api
1.2.接着安装vscode wxml这个插件，主要是针对wxml文件的
1.3.继续安装vscode-wechat这个插件
1.4.然后安装一下Easy WXLESS
其他插件
1.5. wechat-snippet
微信小程序代码辅助,代码片段自动完成
1.6. minapp
微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
需要输入<才会触发标签补全
输入空格会触发对应标签的属性补全
1.7. wxapp-helper
选择创建wx组件，自动生成配套的文件，简直不要太爽

2.app.json直接增加
“pages”:[
“index/index”,
“test/test”
],
首页显示第一个文件

3.组件
3.1view相当于div或者p标签，block属性
3.2text 类比span 行内元素，但是又有区别
selectable // 文档是否可选
decode=“true” // 转义特定的字符，比如 

3.3 button
点击我

 <button form-type="submit">submit</button>

 <button open-type="getUserInfo">点击我</button>

4.checkbox 复选按钮
可以在开闭标签内，写上复选内容
value:可以填入真实的值
要配合checkbox-group

radio 单选按钮
要配合radio-group

5.block
5.1 block本身不会被渲染到页面中，但内容会渲染
5.2 block中可以加判断显示隐藏

6.input


如果type=number，手机上弹出数字键盘

7.事件绑定
7.1 input没有双向绑定，要用bindinput监听

7.2 传参 data-***=“1”
点击

8.不能像vue用v-model双向绑定
修改data数据，需要用this.setData
clickme(event){
this.setData({
msg:“ni 好 吗”
})
console.log(this.data.msg)
},

9.获取用户信息&手机号&联系客服
获取用户信息:
获取用户信息
手机号:
获取用户手机号
联系客服
联系客服
新增getUserProfile接口

10.rich-text node=""
vue 的v-html

10.1.data的msg里面不能有id
10.2.可以写class
10.3.如果有name属性，大小写不敏感
10.4.仅支持网络图片地址，不支持本地图片地址
10.5.如果里面有点击事件，一概忽略

11.弹窗 wx.showToast
小程序中没有alert()
弹窗
// icon:‘none’ loading success 比较常用的三个状态
showalert(){
wx.showToast({
title: ‘这是第一次弹窗’,
// duration:2000,
icon:‘none’
})
setTimeout(()=>{ // 等同于上面的duration
wx.hideLoading()
},2000)
}

//弹窗，确定取消模块
wx.showModal({
title:‘4.2’,
content:‘好好学微信小程序找工作’,
success(res){
console.log(res.confirm)
}
})

12.跳转
跳转
或者用js:
bindtap =“navi”
navi(){
wx.navigateTo({
url:’/test/test?id=1’
})
}
//跳转到的test.wxml lifecycle中可以收到
onLoad: function (options) {
console.log(options) // {id:‘1’}
},

获取后台数据:

getData(){
    var that = this;
    wx.request({
    url:'https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb',
    success(res){
        var data = res.data;
        that.setData({
          jobs:data
        })
        console.log(that.data.jobs)
    }
    })
},

13 wx:for key

13.1 key值不用差值表达式
13.2 可以用index或者newsList中有的值，如id

14.lifecycle
onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。

15.template component page
template:静态页面，不用做交互
component: 有逻辑功能，js写交互
page是页面级别的
template模块与component组件，是小程序中组件化的方式。二者的区别是，template模块主要是展示，方法需要在使用template的页面中定义。而component组件，则拥有自己的js文件，整个component组件类似一个page页面。简单来说，只是展示用，建议使用template，组件中涉及到较多的逻辑，建议使用component。

15.1、template模块的使用
定义模板，一份template.wxml文件中能写多个模板，用name区分

<template name="one">
  <text class='red' bindtap="click">I'm one,{{hello}}</text>  //注意：1、这里有个点击事件。2、{{hello}}是使用模板时传入的属性（参数）
</template>
 
<template name="two">
  <text>I'm two,nice to meet you</text>
</template>
在页面中引入并使用模板

<!--index.wxml-->
//导入模板
<import src="../../template/template.wxml" />
 
<view class="container">
  <!-- 引用template模板，用is="one"的方式，选择模板 -->
  <template is="one"  data="{{...str}}" /> //传入参数，必须是对象
  <template is="two" />
</view>

在页面中引入模板样式。模板拥有自己的样式文件（用户自定义），只需要在使用页面的wxss文件中引入即可

/**index.wxss**/
@import "../../template/template.wxss";  //引入template样式
.container{
  display:flex;
}
由于template中没有js文件，因此template中的点击事件，在使用页面中的js里定义。如上，name=one的模板有个点击事件click，则click方法，需要在index.js中定义

//index.js
Page({
  data: {
    str：{
      hello：”nice to meet you“
    }
  },
  click:function(){
    console.log("click one");
  }
})

因为template没有自己的js文件，所以在列表中涉及到列表子项独立的操作，建议将列表子项写成component。

2、component组件
创建一个component，只需要在其目录下右键–新建–component，即可直接生成4个文件（json中的设置会默认"component": true）。component组件的结构和page的结构类似，都是有js、wxml、wxss、json四类文件组成。wxss代码与page是一样的，代码就不贴了。其他代码如下：

wxml代码，与page一样

<!--components/hello/hello.wxml-->
<text class="red" bindtap="click">component {{type}}  hello {{name}}</text>
js代码，与page有些许不同

// components/hello/hello.js
Component({
  /**
   * 组件的属性列表，使用组件时，传入的参数
   */
  properties: {
    name:{
      type:String,
      value:''
    }
  },
 
  /**
   * 组件的初始数据，组件内部的数据
   */
  data: {
    type:"组件"
  },
 
  /**
   * 组件的方法列表，组件内部的方法
   */
  methods: {
    click:function(){
      console.log("easy");
    }
  }
})
json代码，需要注明"component": true，表示这是一个组件

// components/hello/hello.json
{
  "component": true,
  "usingComponents": {}
}

page中的使用，与template模板不同，component不需要在wxml中引入，但需要在json中指明使用的组件名及路径。

<!--index.wxml-->
<view class="container">
  <hello name="Easy"/>  //使用hello组件，并传入值为“Easy”的name属性（参数）
</view>
//index.json
{
  "usingComponents":{
    "hello":"/components/hello/hello"  //前面的hello是组件名，可以更改。路径指向使用的组件
  }

16.层级关系，从上往下:
弹窗层
遮罩层
navigate导航层
内容层