微信小程序中登录操作-----与-----引用

login.wxml

<view>
    <!-- <image src="./88.png"></image> -->    # 在当前目录下导入图片
    <image src="../../images/00.jpg"></image>  # 导入根目录的文件下的图片
    <view class="userinfo">
    <input type="text" placeholder="邮箱" bindinput="bindemail" />
    # input输入值,需要bindinput,或者 bindchnage ...
    </view>
    <view class="userinfo">
    <input type="text" placeholder="密码" bindinput="bindpasswd" />
    </view>
    <view class="sub">
    <button bindtap="submit">登录</button>
    # button 点击事件的用 bindtap
    </view>
</view>

login.js

Page({
    data: {
        # 初始化数据 根据input操作
        email:'',
        password:''
    },
    	# 绑定from值得获取---e代表用户输入的值---bindemail就是bindinput绑定值
    bindemail:function(e){
        this.setData({
            email:e.detail.value
        })
    },
    bindpasswd: function (e) {
        this.setData({
            password: e.detail.value
        })
    },
	# submit 作为 bindtap的点击事件
    submit:function(){
        # 在控制台查看用户输入的信息
        console.log(this.data)

        # 请求的一个小标志(转圈圈的) ------------ showToast
        wx.showToast({
            # 转圈圈提示的内容
            title: '登录请求中',
            # 自带的
            icon:'loading',
            # 时间,持续多长时间 10000--->10秒
            duration:1000000
        });

        ## 网络请求开始
        wx.request({
            # 路由请求地址,也可以直接解决前后端跨域问题
            url: 'http://127.0.0.1:8000/api/getlogin/',
            # 请求携带的头部信息
            header: {'content-type':'application/x-www-form-urlencoded'},
            # get   header: {'content-type': 'application/json'},
            # 请求方式
            method:'post',
            # 该页面请求的内容
            data: {'username':this.data.email,'password':this.password},
            # 发送请求后接受后台返回的信息 res
            success:function(res){
                # 如果成功接受后取消掉转圈圈-----------hideToast
                wx.hideToast();
                # 判断状态码,如果200 ,进行业务逻辑的操作
                if(res.data.code == 200 ){
                    # 进行一些用户状态的存储
                    console.log(res)
                }else{
                    # 在页面弹出用户登录失败信息--------- showModal
                    wx.showModal({
                        title: '登录失败',
                        content: '请检查您填写的用户信息',
                        showCancel:false,
                        success:function(res){
                            //回调函数做一些自己的事情
                        }})}}})}}),

微信小程序中的引用(import,include)

1. 在pages新建一个目录,common,再建一个template_item.wxml (名字可以自己起)

<template name="item">
<text>引用模板显示内容:{{text}}</text>
</template>

2. 在运行的wxml中导入写好的wxml上面的

<import src="../common/template_item.wxml"/>             # 注意导入的路径
<template is="item" data="{{text: '这是我书写的内容'}}"/>  # 注意/的位置

3. 在pages新建一个目录,common,再建一个header.wxml,footer.wxml (名字可以自己起)

<text>这里是头部</text>
<text>这里是尾部</text>

4. 在运行的wxml中导入写好的wxml上面的

<view><include src="../common/header.wxml"/></view>
<text>xxxxxxxxxxxxxxxxxxxxxxxxx</text>
<view><include src="../common/footer.wxml"/></view>