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

login.wxml

        # 在当前目录下导入图片
      # 导入根目录的文件下的图片
    
    
    # input输入值,需要bindinput,或者 bindchnage ...
    
    
    
    
    
    登录
    # button 点击事件的用 bindtap 
    

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 (名字可以自己起)

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

             # 注意导入的路径