微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)
内容:
一、前言
二、相关概念
三、开始工作
四、启动项目起来
五、项目结构
六、设计理念
七、路由
八、部署线上后端服务
同步交流学习社区: https://www.mwcxs.top/page/440
源码地址:https://github.com/saucxs/wx_phoneBook
上线之后小程序码:
测试账号:18966667777,密码:test
一、前言(坑爹的玩意)
微信小程序自从2017年,被各种看好,不过一段时间过去了还是反响平平,下半年随着各项功能的开放,很多企业陆续接入了小程序,我觉得就算是坑,咱们也得踩踩。不然怎么从微信这个大流量体系中推广引流。
小程序内部可以理解成一个mvvm的框架,分为逻辑层和视图层,逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试入门练手项目--通讯录(phoneBook)(JavaScript和node.js基础即可,微信推荐使用的语言,去菜鸟教程简单学习下 JavaScript,node.js,mysql,nginx即可),方便大家学习。
二、相关概念
官方解释:微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。可以理解成一套嵌套在微信里面的app,和原生app不同的是不需要下载,属于小而轻的应用。
三、开始工作
1、本地koa后台服务部署
可以参考快速新建简单的koa2后端服务 这篇文章,教会你快递建立简单的koa后端服务。
2、准备注册等工作
(1)注册账号
(2)下载开发者工具, 下载1.02.x这个版本的,最新版的有bug,编译的时候调试器Wxml窗口会出现空的page标签,里面没有内容。
(3)注册好后登录下微信公众平台|小程序,在设置里找到开发设置,把appID保存下来,一会开发的时候需要用到
四、启动项目起来
1、此时,工具有了,ID有了,接下来开始我们的撸码之旅。
打开开发者工具,扫码登录后选择小程序项目,点击右下角的加号,创建新项目,选择项目目录,填写appID,项目名称,写好后点击确定。
2、确定以后,默认打开后,发现给我们创建了一些代码。
3、设置不校验合法域名
这个设置是本地开发换环境下,进行开发调试的,必须勾上。
4、运行起来了
五、项目结构
我们主要看app.js、app.json、app.wxss三个文件和pages文件夹里面的wxml
1、app.js做为小程序的入口,里面有个App实例,每个小程序只会有一个App实例,小程序启动以后触发onLaunch函数执行,获取用户信息
2、app.json是小程序的所有全局配置,pages字段放置所有页面的路径,window字段定义所有页面的顶部背景颜色,文字颜色 详细配置请戳这里?
3、app.wxss文件就是页面公用的样式,仅支持部分css选择器
4、wxml就是我们的HTML文件,常用标签为 view 、text 等,没有所谓的div、span、p一类的标签了,我们习惯称它们为组件
六、设计理念
1、小程序可以理解成一个mvvm的框架
分为逻辑层和视图层,逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
// pages/login/login.js const app = getApp(); Page({/*** 页面的初始数据*/data: {phone: '',password: '',isError: false,errorText: ''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 输入手机号*/bindPhoneInput: function(item){this.setData({phone: item.detail.value})},/*** 输入密码*/bindPasswordInput: function (item) {this.setData({password: item.detail.value})},/*** 点击登录按钮*/login: function (item) {if(this.data.phone === '' || this.data.password === ''){this.setData({isError: true,errorText: "手机号码或密码不能为空"})return;}let that = this;wx.request({url: `${app.globalData.apiUrl}/login`, data: {phone: this.data.phone,password: this.data.password},method: "POST",success: function(res){if(res.data.success){wx.setStorageSync("USERID", res.data.userID);wx.switchTab({url: '/pages/department/department',});}else{that.setData({isError: true,errorText: "请输入正确的手机号码或密码"})}},fail: function(item){console.log(item)},complete: function(item){console.log(item)}})},
使用Page函数来注册一个页面,接收一个Object参数。
这里我们使用了onLoad来监听页面的加载,
定义了一个输入手机号bindPhoneInput函数 ,并使用setData函数将text的值进行更改,
定义一个输入密码bindPasswordInput函数,并使用setData函数将text的值进行更改,
定义一个登陆按钮login函数,通过wx.request方法请求后端服务接口,通过wx.setStorageSync方法将请求的结果加入到storage中,通过wx.switchTab方法跳转到相应的路由。
<!--pages/login/login.wxml--> <view class="container"><view class="login-container"><text class="app-title">系统</text><form class="login-form"><view class="section"><input name="phone" type="number" bindinput="bindPhoneInput" maxlength="11" placeholder="手机号码" /></view><view class="section"><input name="password" bindinput='bindPasswordInput' type="password" password="true" placeholder="密码" /></view><text class="{{ isError ? 'error' : ''}}">{{errorText}}</text></form><view class="section"><button bindtap="login">立即登录</button></view></view> </view>
更改data数据的时候必须调用setData函数进行更改,我们在button组件上添加了点击事件,调用了login函数。
相应的事件可以参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
2、传递参数
有时候我们需要触发事件的时候,传递一些参数,那小程序怎么传递呢?很不幸,小程序不能类似js里面直接传递,往往我们需要将传递的数据绑定到事件元素上。
// index.wxml <button data-test="哈哈" bindtap="change">点击我</button> 使用e.currentTarget.dataset来获取值 // index.js change(e){e.currentTarget.dataset.test // 哈哈 }
七、路由
小程序里面所有的页面路由由框架进行管理
我们可以使用getCurrnetPages函数获取当前页面栈的实例,返回一个数组, 最后一个元素为当前页面
小程序定义了五个用于导航跳转的API,这里列举两个常用的
1、wx.navigateTo 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面
wx.navigateTo({url:`/pages/text/index?text=${saucxs}`})
2、wx.redirectTo 关闭当前页面,跳转到应用内的某个页面
wx.navigateTo({url:`/pages/text/index?text=${saucxs }`})
通过上面的API跳转带的参数,在页面上我们需要怎么获取呢?
// text.js Page({data:{... // 页面数据 },onLoad(options){console.log(options.text) // saucxs 获取上个页面带过来的值 } })
(一)数据过滤 过滤器
如果你使用过vue、angular框架,对|管道符肯定不陌生,它用来对我们的数据进行转换,那小程序里面有没有过滤器呢,不过这个是真没有。
但是目前有两种方法,可以实现过滤。
1、获取数据的时候,直接改了,干脆利落、好不优雅。
2、使用最后我们要介绍的wxs
(二)WXS
WXS是小程序的一套脚本语言,首先和js是不同的语言,其次运行环境和js也是隔离开的,wxs不能调用js文件中的函数,也不能调用小程序的API,它主要用来增强wxml。
wxs不能使用es6语法,接下来我们来实现一个使用wxs实现一个简单的过滤器。
1、首先我们创建filter.wxs文件并写入以下内容
// filter.wxs var Filter = {getSatusStr: function(num){var str = '';switch (num) {case 0:string = '待支付'break;case 1:string = '已支付'break;default:string = '待发货'break;}return str} } module.exports = {status: Filter.getSatusStr }
同级下index.wxml使用
<wxs module="filter" src="./filter.wxs"></wxs> <view wx:for="{{list}}"><view>{{filter.status(item.status)}}</view> </view>
总结:
1、每个wxs标签都有一个module 属性
2、wxs可以写在wxml里面的wxs标签里和.wxs文件里
3、wxs文件中引入其他wxs文件时候,可以使用require函数,接受相对路径
4、在wxml标签里使用外部wxs文件的时候,src属性是相对路径。
八、部署线上后端服务
微信小程序搭建环境必需的两点:云服务器,域名,下面给搭建演示如果在一台阿里云服务器上搭建微信小程序服务端环境。
(一)准备好将http转成https
可以参考这篇阿里云免费购买SSL证书,nginx无缝升级https:https://www.mwcxs.top/page/434.html
参考主要是申请和解析域名,以及将nginx的http跳转到https。
(二)线上部署koa后台服务
1、修改mysql配置
const pool = mysql.createPool({host: 'xx.xx.xx.xx',port: '3306',user: 'root',password: 'xxxxxxxxx',database: 'wx_contactsadmin',connectionLimit: 100 })
host使用你的服务器外网IP,user数据库用户名,密码,以及数据库名称。
2、修改请求后端的url
在app.js
globalData: {userInfo: null,// apiUrl: 'http://localhost:8000/contact'apiUrl: 'https://phonebook.mwcxs.top/contact'}
3、使用pm2管理koa的服务
4、本地修改设置不校验合法域名
去掉不校验合法域名的勾选
转载于:https://www.cnblogs.com/chengxs/p/9898670.html
微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)相关推荐
- 微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS,最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档(全程无需后端,前端文件直传阿里云oss服务器)
前言 网上的教程乱七八糟却文件少代码(并且没注释),而且都已经很老了,对于新手来说真的无从下手. 本文站在新手小白的角度,实现微信小程序开发中,"前端直传" 上传文件到阿里云oss ...
- 微信小程序初体验(上)- 腾讯ISUX社交用户体验设计成员出品
微信小程序开放公测后一直很火,作为腾讯ISUX社交用户体验设计成员自然不能错过这样的好戏,下面就随ytkah一起来看看"小程序官方评测"吧,write by 腾讯ISUX练小习. ...
- 微信小程序初体验-苏州实时公交API
利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如"苏州实时公交"小程序,选择的是苏州实时公交API. 苏州实时公交API文档:h ...
- 微信小程序超详细入门简介和使用
微信小程序 介绍: 微信小程序,简称小程序,英文名Mini Program, 是一种不需要下载安装即可使用的应用,它实现了应用"触手可及的梦想",用户扫一扫或搜一下即可打开应用 微 ...
- 知乎爆赞!4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》,你学废了吗?
前言 微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
- 微信小程序开发从入门到精通
微信小程序开发从入门到精通 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识 ...
- python新手小项目-推荐:一个适合于Python新手的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
- 微信小程序初步入坑指南
微信小程序初步入坑小指南 安装工具 developers.weixin.qq.com/miniprogram- 打开链接下载小程序云开发 app.json 为json格式的文件,为一个配置文件,属于全 ...
- 《微信小程序:开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一 书中的第3章,第3.4节,作者李骏 边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
最新文章
- 【pmcaff】苏杰:产品经理对技术做这些,就完蛋了
- REST、SOAP、protocolbuf、thrift、avro
- url去除掉一个参数php,php怎样去掉url中的参数_后端开发
- 传输层(知识架构图)
- java暂停5s_java如何实现继续/暂停按钮
- 安卓Service完全解析(中)
- 机器学习-代价函数(单变量线性回归)
- java私聊_【转帖】实现了视频私聊功能
- MySql update inner join!MySql跨表更新 多表update sql语句?如何将select出来的部分数据update到另一个表里面?...
- vue中如何实现pdf文件预览?
- html菜鸟教程 很多代码,HTML5 代码编写规范简介
- Gurobi求解标准数独问题
- 华东理工大学计算机考研资料汇总
- 如何在服务器发布网站
- 预训练(pre-training/trained)与微调(fine tuning)
- BFM(Bus Functional Model )--总线功能模型
- Mac安装Adobe Zii5.3.0过程
- 自定义店招应该具有的基本功能
- android 重复解绑服务,Android培训实战教程之多次解绑抛出异常原因
- 二维码生成插件qrious(纯JS)
热门文章
- bgp状态idle什么原因_当bgp的邻居状态机处于什么状态是,标志着与邻居的tcp连接已经正常建立...
- 查询网站web服务器,web服务器地址查询
- php mysql 简单留言板_php+mysql 最简单的留言板_PHP教程
- java awt编程_java awt编程
- ppt扇形图怎么显示数据_PPT图表除了显示数据变化,还可以干嘛?
- 一个 TypeScript keyof 泛型用法
- 微软最具价值技术专家:我的16年软件开发经验总结
- 027——VUE中事件修饰符:stop prevent self capture
- Android系统开发之唤醒与功耗
- 学习AJAX,解析XMLHttpRequest对象