首页 技术 正文
技术 2022年11月15日
0 收藏 619 点赞 2,395 浏览 1231 个字

内容:

一、前言

二、相关概念

三、开始工作

四、启动项目起来

五、项目结构

六、设计理念

七、路由

八、部署线上后端服务

同步交流学习社区: 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字段定义所有页面的顶部背景颜色,文字颜色 详细配置请戳这里

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,903
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,428
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,245
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,057
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,689
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,726