关于小程序的入门学习之一

     好像记得是前年开始发布小程序,当时一些同行朋友跟我说最近微信会有小程序发布,将来必定大火!小程序确实是发布了,但是比较鸡肋,但是也有一些不少可取的地方,这里就不瞎扯了.直到最近有面试的童鞋复试的题目是需要做一个体验版的小程序,题目如下:

      其实本身的功能也不难,就是小程序没有了解过,不过做过之后的话发现挺简单的,就是需要熟悉微信本身的wxml和一些api的方法.

     首先拿到题目的话先分析一下需要做什么东西,首先在小程序中需要做一个简单的文本框和按钮,这里的话面试官是想看看自学速度是不是快,这个只需要查看下小程序的文档即可(https://mp.weixin.qq.com/debug/wxadoc/dev/component/)

<form bindsubmit="formSubmit" bindreset="formReset">

	<view class="section">
  
		<input name="name" placeholder="这是一个可以自动聚焦的input" auto-focus/>
	
</view>
 
	<button formType="submit">报名</button>

</form>

form表单中的bindSubmint这个是设置在js中form表单提交的方法(这个是结合代码得出的结论,没有查阅资料,最后代码验证确实是这样的)

效果如下图(css代码太简单就没有贴上来了)

     然后,页面写好了只有就是需要交互了,题目中有要求是可以在后台管理报名信息,我理解为pc端后台进行管理,那么我们首先要写一个PHP的后台管理的模块,另外需要做一个响应的接口,我是做了一个php原生简单的接口,结构如下图:

api.php(文件是处理接受的数据,进行数据库的处理

<?php
//require_once 'pdoModel.php';
class api{
    public $db;
    //数据库连接
    function __construct(){
        $dbms='mysql';     //数据库类型
        $host='localhost'; //数据库主机名
        $dbName='test';    //使用的数据库
        $user='root';      //数据库连接用户名
        $pass='root';          //对应的密码
        $dsn="$dbms:host=$host;dbname=$dbName";
        try {
            //默认这个不是长连接，如果需要数据库长连接，需要最后加一个参数：array(PDO::ATTR_PERSISTENT => true) 变成这样：
           $this->db = new PDO($dsn, $user, $pass, array(PDO::ATTR_PERSISTENT => true));
        } catch (PDOException $e) {
            die ("Error!: " . $e->getMessage() . "<br/>");
        }
    }  
    //用户报名存储
    function user_bm($user){
       $strSql = "insert into user(bm_name) values('".$user."')";
       $re = $this->db->exec($strSql);//条数
       return  intval($re);//返回新增数量
    }
    
    //接口发送数据格式
    function sendRe($param='') {
        $data = array();
        if (!empty($param)){
            $data['status'] = 0;
            $data['data']   = $param;
            $data['info']   = 'success!';
        }else{
            $data['status'] = 500;
            $data['data']   = $param;
            $data['info']   = 'miss param!';
        }
        echo json_encode($data);
    }
}

index.php(这个文件就是小程序请求的文件)

<?php
require_once 'api.php';
$test = new api();
if (isset($_REQUEST)){
    $name = $_REQUEST['username'];
    $num = $test->user_bm($name);
}
    $test->sendRe($num);

做完之后要在本地测试好,获得url地址:http://localhost:8080/ceshi/index.php

   最后,接口写好了之后的话就需要在小程序中请求,小程序的交互似乎都是通过js请求,对应的页面文件夹中的index.js,开始说到在页面中是用form表单来提交,提交方法是bindSubmint的值,那么我们接下来要在index.js中最后代码中添加提交方法如下

// pages/login/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

 ...自带的方法...

//start
  formSubmit: function (e) {
    var username = e.detail.value.name;
    wx.request({
      url: 'http://localhost:8080/ceshi/index.php', //仅为示例，并非真实的接口地址
      data: {
        username: username
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)
      }
    })
  }//end
})

这样子小程序与本地的api都互通了,form表单的提交也是在文档上简单的!

以上就是研究出来的小demo,对于开发时间长点的程序员来说应该还算比较好入门,如果js精通的就更加没有什么难度了,以上内容也许有误,请大家积极指出!