内容:
一, 前言
二, 相关概念
三, 开始工作
四, 启动项目起来
五, 项目结构
六, 设计理念
七, 路由
八, 部署线上后端服务
同步交流学习社区: https://www.mwcxs.top/page/440
源码地址: https://github.com/saucxs/wx_phoneBook
一, 前言 (坑爹的玩意)
微信小程序自从 2017 年, 被各种看好, 不过一段时间过去了还是反响平平, 下半年随着各项功能的开放, 很多企业陆续接入了小程序, 我觉得就算是坑, 咱们也得踩踩. 不然怎么从微信这个大流量体系中推广引流.
小程序内部可以理解成一个 mvvm 的框架, 分为逻辑层和视图层, 逻辑层将数据进行处理后发送给视图层, 同时接受视图层的事件反馈.
最近微信小程序异常火爆, 很多人在学习, 下面带着大家搭建下微信小程序的调试环境 (client+server), 并调试入门练手项目 -- 通讯录 (phoneBook) https://github.com/saucxs/wx_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 字段放置所有页面的路径, Windows 字段定义所有页面的顶部背景颜色, 文字颜色 详细配置请戳这里
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 函数.
相应的事件可以参考官方文档:
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