目录

1.项目背景

2.需求分析

3.数据源设计

4.小程序的创建

4.1 首页的创建

 4.2工作室页面的创建

 4.3我的页面的创建

4.4各项功能的实现

4.4.1轮播图片的上传

4.4.2点击组件拨号功能

4.4.3列表点击查看详情

 5.总结

---

        *首先非常感谢低代码布道师 韩老师对我的帮助，再次感谢！其次本文写的不是很专业，当然如果可以帮到你们那是再好不过了！

1.项目背景

        在校园生活中，许多同学或多或少存在着电脑中毒、系统崩溃、专业软件安装困难、清灰等一系列的问题于困扰，而这恰巧体现了我们工作室存在的必要！在工作室的日常维修中，如果开发一款维修预约小程序，不但能提升学生的便捷性，而且工作室在学校的知名度也会有所提升！

2.需求分析

为了进行功能分析，我们用在线软件（Mind line）做一个思维导图，如下图：

        综合考虑，我们计划有三个页面，即首页、工作室和我的。而首页包括我们现已准备的维修预约、软件安装、硬件介绍以及软件推荐；在关于我们的页面主要是对工作室的历史进行一定的阐述，这样更有助于同学们更好的了解我们；当然在我的页面，我们通过获取用户的微信头像及昵称对其页面进行渲染，当然还有联系我们和问题反馈的按钮。

3.数据源设计

        由思维导图我们可以得知，现在我们需要的数据源有：用户信息、用户预约信息、软件安装预约信息、硬件介绍数据、软件推荐数据、工作室成员信息。（可能有人会问上面的部分数据源为什么不合在一起，原因就是由于个人技术原因，在者我们的这些功能是分离的如果数据源合在一起会出现部分信息为空的漏洞）；由于后期我们需要实时上传轮播图所以还需要创建图片管理的数据源。设计数据源如下：

用户信息

头像(avatarUrl)	文本|短文本
昵称（nickname）	文本|短文本
openId	文本|短文本

用户预约信息

头像（avatarUrl）	文本|短文本
昵称（nickname）	文本|短文本
openid	文本|短文本
手机（phone）	手机
邮箱（email）	邮箱
问题概述(questions)	文本

软件安装预约信息

头像（avatarUrl）	文本|短文本
昵称（nickname）	文本|短文本
openid	文本|短文本
手机（phone）	手机
邮箱（email）	邮箱
软件名称（Appname）	文本
安装包有无（Y/N）	文本

硬件介绍数据源

头像（avatarUrl）	文本|短文本
昵称（nickname）——介绍人	文本|短文本
openid	文本|短文本
硬件介绍图片	图片
硬件名称——标题	文本
硬件介绍详情	文本

软件推荐数据源

头像（avatarUrl）	文本|短文本
昵称（nickname）——介绍人	文本|短文本
openid	文本|短文本
软件介绍图片	图片
软件名称——标题	文本
软件介绍详情	文本

工作室成员信息

头像（avatarUrl）	文本|短文本
姓名	文本|短文本
openid	文本|短文本
手机	手机
邮箱	邮箱
年级	文本

服务时间及地点

服务时间	文本
服务地点	文本

图片管理

预约页面图片	数组|图片
极速预约页面图片	数组|图片
软件安装页面图片	数组|图片

4.小程序的创建

下面就详细的介绍一下我做的小程序，由于我是纯小白，主要介绍微搭中一些功能的实现

4.1 首页的创建

首页的创建比较简单，主要有各项功能的按钮（用于跳转页面）以及底部的Tab栏（用于定向页面）

 4.2工作室页面的创建

在这个页面中主要是介绍工作室的创建等信息，在着其中由于工作室每学期的开放时间不定，所以需要调用数据源来获取实时的开放时间与地点。

在这个页面创建一个模型变量time，然后在我们需要的位置为文本来绑定这个变量中的时间字段

 4.3我的页面的创建

首先在该页面先创建如下格式，并且创建一个名为userinfo的普通变量和名为openid普通变量并将其设置为全局变量

{
  "city": "",
  "gender": "",
  "openid": "",
  "country": "",
  "language": "zh_CN",
  "nickName": "",
  "province": "",
  "avatarUrl": ""
}

然后为第一张图片绑定userinfo中的avatarUrl并设置出现条件 ：$page.dataset.state.userinfo.openid !=""

为第二张图片以及下面的文本与按钮设置条件：$page.dataset.state.userinfo.openid ==""

在自定义连接器中创建方法

const cloud = require('wx-server-sdk');
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
module.exports = async function (params, context) {
        
  const wxContext = cloud.getWXContext()
  return {
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
        
    
}
}

然后在低代码编辑区添加方法

1.openid（若要采用一定主义自己的连接器的标识和方法标识）

export default async function({event, data}) {

    const objData = await app.cloud.callDataSource({
        dataSourceName: 'getopenid_i3otw2h',  //自定义连接器标识
        methodName: 'getopenid',  //自定义连接器方法标识
        });
    console.log('objData:', objData); //打印获取到的信息，用于对小程序进行调试（非必须）
    app.dataset.state.openid=objData.openid; // 将变量赋值给上文中创建的普通变量

}

2.getuserinfo

export default async function({event, data}) {

 
    try {
     wx.getUserProfile({
            desc: '用于完善用户信息',
            success:async (res) => {
            //const data = await app.cloud.dataSources.userinfo_xpw5sxe.wedaCreate(res);
            console.log("res.userinfo",res.userInfo)
            $page.dataset.state.userinfo = res.userInfo
            $page.dataset.state.userinfo.openid = app.dataset.state.useropenid
            let ret =await app.dataSources.userinfo_xpw5sxe.wedaCreate($page.dataset.state.userinfo);
            console.log(ret)
            }
    })
    console.log("userinfo",$page.dataset.state.userinfo)
    const ret = await app.dataSources.userinfo_xpw5sxe.wedaCreate($page.dataset.state.userinfo);
    console.log(ret)
    } catch (e) {
    console.log('错误代码', e.code, '错误信息', e.message);
  }
}

3.callphone

export default function({event, data}) {
    let phone = "管理员联系方式"  // 在此处修改店家的联系方式即可
   
    wx.makePhoneCall({
        phoneNumber: phone 
    })
}

以上三种方法不敢保证代码的准确性但功能都可正常使用，同时也欢迎各位大佬前来纠正！

然后为第一个授权按钮绑定前两个方法，

 传入参数为刚创建的全局变量openid，

为联系我们按钮绑定第3个方法，至于问题反馈按钮可调用数据源来创建一条信息写入

 这样我的页面就创建成功了！！！

4.4各项功能的实现

4.4.1轮播图片的上传

首先在页面创建一个模型变量yuyuetupian，然后将轮播容器中的图片绑定

 如下：

 

 绑定第二张图片时，将当前选中中的代码复制，然后将最后的【0】改为【1】，第三张以此类推。

4.4.2点击组件拨号功能

        首先在该页面创建一个普通变量phone，并且将其地址复制，其次在低代码编辑区添加方法callphone，如下图：

export default function({event, data}) {
    let phone =$page.dataset.state.phone //这里是刚才复制的普通变量的地址

    wx.makePhoneCall({
        phoneNumber: phone // 在此处修改店家的联系方式即可
    })
 }

        然后点击组件行为，选择变量赋值，变量值绑定循环数据中的tel，紧接着在添加一个点击时的自定义方法，即callphone，传入参数绑定为普通变量phone。这样点击组件自动拨号的功能就完成了！

4.4.3列表点击查看详情

        首先在该页面添加模型变量，其次左侧组件库中有数据容器点击添加列表视图，然后点击普通容器中的通用配置，选择循环展示，绑定刚才创建的模型变量，见下图：

         然后为下面的文本绑定你所需要展示的内容，接着我们为单个列表点击添加行为——页面跳转，而参数传入其中的数据标识。（如上图）这样我们的列表页就创建成功了。

        紧接着我们来到详情页，首先需要创建一个参数变量orderid，用于接收列表页传过来的id，其次创建一个模型变量用于查询其内容详情，在创建过程中的数据标识那里绑定刚才创建的参数变量！接着我们设置页面中我们想要展示的内容详情！这样我们列表点击详情的功能就实现了！

 5.总结

        以上就是工作室小程序（用户端）在创作过程中遇到的一些小问题与总结，同时也欢迎各界大佬前来批评纠正。当然也希望我的一些总结可以帮到屏幕前的你！再次感谢 低代码布道师韩老师对我的极大帮助！！！