初始接触微信小程序
第一次写微信小程序。写这个原因就是因为“编程之美3”的活动了，之前也没接触过，这次就当作一个学习的机会了。
看了编程之美3的介绍外加自己查了些资料，写了一个简单的登录界面，可以凑合着看，在这分享下，也是为了能发到编程之美3的帖子中去。
要进行微信小程序开发需要一点小工具，这些在编程之美3那都有介绍连接是：
1其实只要下载一个微信小程序的开发工具就好了下载地址，自己查去吧。
2了解下微信小程序的API，找找demo什么的。
3开始写代码。。
boolean flag=true;
while(flag){
4调试
if(5发现错了){
flag=true;
}else{
flag=false;
}
6查资料
7改
} 8
最后写出了这么个东西：
这个算主题了吧，是登录页面主要就写了这么个东西； 基本过程和代码如下：
1添加一个文件夹：login (自己爱起名是啥都行。)
文件夹下建立4个文件，
文件名同文件夹名称文件后缀分别是.js,.json,.wxml,.wxss
js是啥就不说了，
json也每天能碰到，
wxml和wxss是什么鬼？查完了发觉wxml和html是一个东西,wxss就是css了..
具体代码： 从少的来： login.json:
{
"navigationBarTitleText": "登录页面"
}
完事了。。这就定义了一个标题。很无聊。直接在wxml里面写多好。。 然后是login.wxml:
<!--login.wxml-->
<view class="container">
<view><text>{{motto}}</text></view>
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
</view>
<view class="loginView">
<input class="inputView" id="username" placeholder-style="color:red;" placeholder="输入帐户" bindchange="bindchange"></input>
<input class="inputView" id="password" placeholder-style="color:red;" placeholder="请输入密码" password="true" bindchange="bindchange"></input>
<button class="loginbutton" type="primary" bindtap="listenerLogin" bindtap="clicklogin">登录</button>
</view>
除了标签和html优点区别没啥大感觉。事件绑定是坑。暂时接触的少，感觉写起来很别扭。
再然后css吧。不对这叫wxss,login.wxss:
/**login.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.loginView{
margin-top: 20px;
}
.inputView{
border:2px solid red;
border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
height: 40px;
}
.loginbutton{
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
css就没学好，凑合看吧。写的比较烂，现在感觉这个完全和css一个东西。 最后js，login.js
//login.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World ,I am WX,this is login page',
userInfo: {},
index:0,
userdata:{
username:"",
password:""
}
},
//事件处理函数
bindViewTap: function() {
wx.showModal({content:"没事别乱点"})
},
onLoad: function () {
console.log('onLoad');
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
},
/**
* 获取页面表单数据变更
*/
bindchange:function(e){
/*console.log(e)
console.log(e.currentTarget)
console.log(e.currentTarget.id)
console.log(e.detail.value)
console.log(e.detail)
*/
this.data.userdata[e.currentTarget.id]=e.detail.value;
},
/**
/**
* 点击登录
*/
clicklogin:function(){
var into_user = this.data.userdata;
var data_login_users = app.userdatas;
var n=app.userdatas.length;
var usernameflag=false;
var passwordflag=false;
if(into_user.username==""||into_user.password==""){
wx.showModal({content:"用户名密码不能为空"})
return;
}
for(var i=0;i<n;i++){
if(into_user.username==data_login_users[i].username){
usernameflag=true;
}
if(into_user.password==data_login_users[i].password){
passwordflag=true;
}
}
if(usernameflag&&passwordflag){
wx.showModal({
title:"提示",
content:"用户名密码正确，登录成功，欢迎您的到来："+into_user.username,
complete:function(){
wx.navigateTo({
url: '../index/index?username='+into_user.username
})
}
})
}else if(usernameflag){
console.log("密码错误");
wx.showModal({
title:"提示",
content:"密码错误"
})
}else{
console.log("用户名不存在");
wx.showModal({
title:"提示",
content:"用户名不存在"
})
}
}
})
js水平也不高凑合看吧，基本上和普通的js没什么区别，就是一些事件需要看下api，绑定事件的时候让人感觉有点茫然，写惯了Jquery，写这个的时候有点乱。
login这个自定义界面就这么完事了。。
好像还差点什么。 对了需要在app.json里面加个配置，别忘了，不然白玩了，配置如下：
"pages":[
"pages/login/login",
"pages/index/index",
"pages/logs/logs"
]
就是别忘了定义自己的连接，不然谁知道这个东西在哪。
我写的js里面东西都很简单就不介绍什么了。
然后就是跳转，跳转传递参数好坑，好坑，好坑。跳转代码：
wx.navigateTo({
url: '../index/index?username='+into_user.username
})
有发现怎么传递参数的告诉我下。我没找明白。。我想传递一个object，然后。。坑了。
这些写完了看下效果图。。。
1密码写错了帐户写对了：
2帐户写错了
3帐户密码都对了
4点击确定后进入下一个界面
我只传递了一个用户名别都没传。 跳转的界面用的是原来带的index 代码就不写了。
写了一个小程序后发觉还是挺好玩的，就是我有点不务正业，上班时间花了四个小时写这个。。
最后谢谢观看这看完我的这篇水货文章。。
手写文章，不要乱转载。。转载了我也不知道。
#前端工程师#
投递小米集团等公司9个岗位 >