前言
最近不太忙,正好前两天看到园子里的大牛分享的微信小程序前端的UI界面--WeUI,看着非常不错,所以尝试着写了一下微信小程序
一、简单介绍下WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
WeUI开源地址：
WeUI使用示例：
基于jquery的WeUI：
二、技术及工具
后端:.net core2.2 WebApi+dapper+sqlserver
前端:微信web开发者工具+WeUI
三、项目准备
1.申请一个微信小程序 或者使用测试号
2.下载WeUI组件
四、微信web开发者工具文件介绍
新建一个小程序之后 会出现这个页面 点击获取头像 会获取当前登录微信的信息
1.app.js是js文件
2.app.json 配置的一些页面信息等配置信息
3.app.wxss相当于css样式了
@import "weui.wxss"; 这里是引用WeUI的样式 首先将weui.wxss文件放在小程序需的根目录,再引入进来
4.project.config.json项目配置文件
5.page文件夹下存放的是页面 默认有个index页面 logs页面
index文件夹下 index.wxml是页面文件
五、正式开发
后台.net core webapi 需要 可以参考,下面详细介绍下小程序部分
1.按照WeUI来写一个简单的页面
新增用户 请完善信息 姓名 年龄 性别
其实页面都很简单 根据WeUI的例子来写就可以
2.下面看下add.js 里边的结构都很清晰明了
data表示页面初始的数据 这里跟vue的数据类似,这里定义好数据名字 页面通过{
{Name}}来绑定// pages/user/add/add.jsPage({ /** * 页面的初始数据 */ data: { radioItems: [ { name: '女', value: '0', checked: true }, { name: '男', value: '1' } ], Name:'', Age:0, isAgree: false, Sex:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, radioChange: function (e) { console.log('radio发生change事件，携带value值为：', e.detail.value); var radioItems = this.data.radioItems; for (var i = 0, len = radioItems.length; i < len; ++i) { radioItems[i].checked = radioItems[i].value == e.detail.value; } //这里是给data数据赋值 this.setData({ radioItems: radioItems, Sex: e.detail.value }); }, bindAgreeChange: function (e) { this.setData({ isAgree: !!e.detail.value.length }); }, bindNameChange:function(e) {console.log(e); var that = this; this.setData({ Name: e.detail.value}) }, bindAgeChange: function (e) { console.log(e); var that = this; this.setData({ Age: e.detail.value }) }, showTopTips: function () { var that = this; console.log(that); setTimeout(function () { that.setData({ showTopTips: false }); }, 3000); if(that.data.isAgree) { //这里相当于ajax调用接口 wx.request({ url: 'http://127.0.0.1:8061/api/usersapi/add', //这里填写你的接口路径,注意一定要在微信小程序中授权过得https数字加密域名 method: 'post',//请求方式 header: { //接口口返回的数据是什么类型，这里就体现了微信小程序的强大，直接给你解析数据，再也不用去寻找各种方法去解析json，xml等数据了 'Content-Type': 'application/json' }, data: { //请求数据 Name: that.data.Name, Sex: that.data.Sex, Age: that.data.Age }, success: function (res) { if (res.statusCode == 200) { //statusCode==200表示请求成功，有数据返回 //这里就是请求成功后，进行一些函数操作 console.log(res.data)//// 服务器回包内容 console.warn(res) wx.showToast({ title: '新增成功' }) setTimeout(function () { wx.navigateTo({ url: '../list/index' }) }, 3000); } }, fail: function (res) { wx.showToast({ title: '系统错误' }) }, complete: () => { wx.hideLoading(); } //complete接口执行后的回调函数，无论成功失败都会调用 }); } }}) 小程序请求都必须是https协议的,本地测试可以设置不校验域名这些
3.微信小程序中没有table这些标签,如果想要以表格的形式来显示 可以自定义样式 页面
用户管理 Id 姓名 性别 年龄 { {item.id}} { {item.name}} { {(item.sex==1?"男":"女")}} { {item.age}}
样式
/* pages/user/list/index.wxss */.table{ border: 1px solid #ccc; width: 100%;}.tr{ width:100%; display:flex; justify-content: space-between;}.th{ font-weight: 900; background: #ff0000; font-size: 14px; color:#000;}.td,.th{ padding: 10px; width: 100%; text-align: center; border-bottom: 1px solid #ccc;} 效果如下:
4.再看看小程序页面之间如何传值
这是跳转页面的方法
options.id就是上个页面传过来的id值
5.接下来就是测试,点击预览 生成小程序的二维码
这里我们发现 请求不到数据 需要去微信公众平台设置域名这些