整體的功能結構
製作前臺表單頁面
1.新建register文件夾和register.js，register.json，register.wxml，register.wxss文件
<code>/*
說明：
register.js - 頁面交互
register.json - 頁面配置
register.wxml - 頁面結構
register.wxss - 頁面樣式
*//<code>
2.修改全局配置文件添加用戶註冊路由，如果有多個路由第一個會被當做默認路由也就是首頁
<code>{
"pages": [
"pages/register/register"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}/<code>注意：在修改全局配置文件和頁面配置文件時不要添加註釋。
3.修改註冊頁面配置文件，添加頭部標題顯示“用戶註冊”
<code>{
"navigationBarTitleText": "用戶註冊"
}/<code>修改之後會在左邊模擬器的頭部顯示“用戶註冊”
4.開始製作表單頁面，打開register.wxml，編寫代碼
<code>
<view>
/<view>/<code>
效果：
5.給表單中的出生日期和所在地區添加動態效果，主要是編輯register.js
<code> /**
* 頁面的初始數據
*/
data: {
date: '2020-01-01',
region: ['廣東省', '廣州市', '海珠區']
},/<code>
<code>
<view>
<text>出生日期：/<text>
<picker>當前選擇：{{date}}/<picker>
/<view>
/**
* 選擇日期
*/
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
},/<code>
效果：
<code>
<view>
<text>所在地區：/<text>
<picker>當前選擇：{{region}}/<picker>
/<view>
/**
* 選擇地區
*/
bindRegionChange: function(e) {
this.setData({
region: e.detail.value
})
},/<code>
效果：
新建用戶信息表
<code>-- 用戶信息表
create table ent_user_profile(
id mediumint unsigned not null primary key auto_increment,
username varchar(30) not null default '' unique comment '用戶名',
pwd char(32) not null default '' comment '密碼',
gender tinyint(1) unsigned not null default 0 comment '性別：0 默認，1 男，2 女',
isStudent tinyint(1) unsigned not null default 1 comment '是否是學生：1 默認是 2 否',
hobby varchar(8) not null default '' comment '業餘愛好',
birthDate timestamp not null comment '出生日期',
district varchar(100) not null default '' comment '所在地區',
remark varchar(150) not null default '' comment '備註',
status tinyint(1) not null default 0 comment '狀態：0 默認待審核，-1 已刪除，1 正常',
add_time timestamp not null default current_timestamp comment '創建時間',
modify_time timestamp not null default current_timestamp on update current_timestamp comment '更新時間',
index idx_add_time (add_time)
) engine=innodb default charset=utf8 collate=utf8_general_ci auto_increment=1;/<code>
提交表單
1.編輯register.js，添加提交表單邏輯
<code> /**
* 提交表單
*/
formSubmit: function(e)
var data = e.detail.value
wx.request({
url: 'http://yourdomain/api/index/index',
data: data,
header: {
'content-type': 'application/json'
},
dataType: 'json',
method: 'post',
success: function(res) {
console.log(res)
}
})
},/<code>
2.在tp5中編寫接口處理代碼
<code>public function index()
{
// 獲取提交的數據
$data = input('post.');
if (empty($data)) {
json(['code' => 1, 'msg' => '參數不能為空'])->send();
exit;
}
$data['isStudent'] = ($data['isStudent'] === true) ? 1 : 2;
if (!empty($data['hobby'])) {
$data['hobby'] = implode(',', $data['hobby']);
$data['hobby'] = rtrim($data['hobby'], ',');
}
$data['district'] = implode(',', $data['district']);
$data['district'] = rtrim($data['district'], ',');
$validate = validate('UserProfileValidate');
if (!$validate->check($data)) {
json(['code' => 1, 'msg' => $validate->getError()])->send();
exit;
}
// md5加密
$data['pwd'] = md5($data['pwd']);
try {
$res = model('UserProfile')->allowField(true)->save($data);
} catch (\\Exception $e) {
json(['code' => 1, 'msg' => $e->getMessage()])->send();
exit;
}
if ($res) {
json(['code' => 0, 'msg' => '操作成功'])->send();
exit;
} else {
json(['code' => 1, 'msg' => '操作失敗'])->send();
exit;
}
}/<code>
測試
因為是在本地環境測試的，在測試之前需修改下面的配置，勾選不校驗合法域名
提交和響應信息
表數據
總結
因為剛開始學習微信小程序開發，只是實現了基本功能，界面顯得很醜陋，但是通過這個小功能可以體驗小程序的開發流程，怎樣與後臺交互，從整體來說小程序僅是前端部分，開發起來需要更多的js，html5以及css3的技術，現在在一些公司比較流行用vue，react，angular等框架來開發，最後在部署上線時將代碼轉換成微信小程序框架的結構，繼續學習，加油！
分享到:
閱讀更多 瑾說編程 的文章
