微信小程序界面，weixin，小程序只能做界面么

点击联系发帖人 时间：2017-01-12 12:03

微信小程序界面

用户的登录界面上需要一个表单元素，包含可以输入用户名和密码的两个文本框，还应当有“登录”按钮和单击会跳转至注册页面的“注册”按钮。完整的登录页面代码如下所示。

表单元素需要包裹在<input>的外部，同时对文本框元素的name赋值，分别是username和password，这样在发送请求时可以将其值取出，发送给服务器端进行登录操作。“注册”按钮采用了事件绑定的方式，绑定了JS中的一个re_Register()方法。当然，依旧需要对页面的样式进行相应的调整，其login.wxss的完整代码：

然后是JS处理的逻辑页面，主要是包含了两个按钮的单击事件，单击“注册”按钮会直接跳转至注册页面，而单击“登录”按钮通过wx.request（）方法给服务器发送所有表单中的数据。不同于自动登录需要发送的uesr_token和验证Token，登录操作需要发送用户名和密码，以及验证Token，才可以完成此功能。

登录页面本身需要实现的基础逻辑是：将用户填写在表单文本框中的值发送给服务器，如果登录成功，服务器端返回一个验证的用户Token，这个Token值的意义在于，实现user/index页面的自动登录，其有效值为7天。当用户输入错的用户名或密码时，显示相关的错误，并且不跳出此登录页面，而是提示用户重新输入。其完整的代码如下：

错误的提示使用了一个弹出层，通过wx.showToast()方法显示一个两秒的消息。当验证成功时，服务器端会返回一些已经记录的参数和用户的user_token，以供下一次的自动登录，这里的处理方式是使用微信小程序自带的缓存，使用wx.setStorage()方法。缓存包含一个键值对。使用console.log（res.data）打印返回值，服务器返回的结果为一个json串，登录成功后，该接口返回两个数据，代表用户登录成功。

本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。

}

经我司开发齐修老师授权来发一砣高质量答案，希望对大家有帮助。阅读时可配合使用 Qdaily 小程序，可有身临其境的效果。

插播广告：微信搜索「qdaily」或扫描图片中的二维码即可开启好奇心

最近集中开发了两款微信小程序，分别是好奇心日历（每天一条辞典+一个小投票）和好奇心日报（轻量版），直接上图：

本文将结合具体的实战经验，主要介绍微信小程序的基础知识、开发中遇到的难点、项目的架构设计、最佳实践以及踩过的坑。文章内容较多，如果想看架构设计和躲坑技巧，请直接浏览后面的正文，简书没有目录，也挺伤感的。

文末有好奇心日报小程序的二维码，欢迎围观。

值得再次声明的是：微信小程序的内容部分是hybrid模式，并非原生，所以性能并不好，绑定的tap事件也有明显的延迟。

每一个由边框围起来的部分，都是一个最小粒度的原生view

如上图所示，每一个由边框围起来的部分，都是一个最小粒度的原生view，可以看出，整个微信小程序的内容部分，就是一个原生view。

小程序有哪些基础知识？

一个完整的微信小程序是由一个App实例和多个Page实例构成，其中App实例表示该小程序应用，多个Page表示该小程序的多个页面。
此外，微信小程序并没有提供自定义组件的方式，这就导致微信小程序在开发较复杂应用时，可能会比较艰难。

微信小程序本身很简单，和一个模板语言的难度几乎相当，翻翻官方教程就可以开始动手搞。
我也建议大家先动起来，然后再细致啃啃官方文档。由于微信官方文档仍在不断大幅更新中，所以务必查看最新官方文档。

微信小程序的基础知识主要分为以下几个部分：
? 两种配置文件 && 两个核心函数
? WXML模板语法，页面渲染
? 官方组件和官方API
后文会就每个部分简单介绍介绍...

两种配置文件 && 两个核心函数

微信小程序的rpx会出现精度问题

设置margin-left/margin-right负值，可能导致页面能够左右晃动。猜测是rpx导致的精度问题。
rpx本质上会转换为px，在不同宽度的设备上，实际的rpx值会转换为带小数的px值，四舍五入可能出现问题，之前使用rem布局的时候在QQ浏览器遇到过类似的问题。

wx.request表现不合理，并且携带特殊字符会报错

? 请求返回404错误，也会触发success回调。
不要想当然的认为会触发fail回调，判断一个请求成功或失败，请使用wx.request返回的状态来判断。只有不符合规范的请求，才会触发fail。

? 请求的数据中，如果有特殊字符（比如\u2820），会报错。
只会在真机上出现，开发者工具没毛病。估计会有更多的特殊字符会导致这个问题。

开发者工具，切换页面的时候，有时候wxml不会同步切换

希望微信什么时候能解决一下。

微信小程序给wxml模板赋值的时候，解构放到前面可能会报错

最新版会遇到这个问题，老版本虽然不会报错，但是在部分真机上会出现问题。
原因未知，遇到这个问题的朋友可以考虑绕过去。

依赖实时获取滚动位置的功能不能实现。比如滚动时toolbar的动态隐藏和显示。

不要给Page.data传入太多无用数据，会影响渲染效率，在iOS上表现特别明显

尽量传入精简的数据，保持Page.data和view间简单的绑定关系即可。

真机上有概率卡死，目前不确定是代码问题还是小程序的问题。

有遇到类似问题的朋友欢迎指出。

本文主要围绕微信小程序的基础知识、如何设计微信小程序、开发过程中遇到的问题三个方面介绍。

微信小程序的基础知识主要包括：
? 两种配置文件 && 两个核心函数
? WXML模板语法，页面渲染
? 官方组件和官方API

如何设计微信小程序的内容主要包括：
? 引入Redux进行数据集中管理
? 简单的组件化解决方案

最后还介绍开发过程中遇到的难点以及微信小程序的大小坑。

微信小程序本身并不复杂，开发过程却比较艰辛，尤其是第一次在真机上运行的时候，觉得这个世界恶意满满。

最后再贴一下我们的小程序使用方法：微信搜索「qdaily」或扫描图片中的二维码即可开启好奇心日报小程序

}

微信小程序开发与招商加盟

浙江微动天下信息技术股份有限公司自2012年成立以来，公司专注于政务及大企业微信设计研发、中小创企业微信开发、智慧商圈、推天下广告媒体、微营销等多个领域，累积取得几十项计算机软件著作权，业务领域

小程序是有内存限制的。

公司成立于2008年，现有职员140多人，本科及以上的占比70%，2015年营业额3000万元，公司旗下平台云客网（）是包含SEO推广等网络营销服务的众包服务平台，杭州志卓拥有“浙江省软件产品认证、浙江省软件企业认证”和“国家高新技术企业认证”以及“杭州市大学生见习基地”等多项资质。

1、扫二维码。小程序最基础的进入方式便是线下扫码，打开微信扫一扫，扫描相应的二维码即可进入。

　　2、微信搜索。微信最上面的搜索框已经增加了小程序的搜索。

　　3、微信公众号关联。一个公众号可以绑五个小程序，但一个小程序只能被一个公众号绑定。可通过公众号查看并进入所绑定的小程序，反之，也可以通过小程序查看并进入所关联的公众号。

　　4、历史记录。用户使用过的小程序会在“发现”-“小程序”中展示出来。

　　5、好友分享。小程序可分享至聊天窗口，包括好友和群。

　　6、添加至桌面。安卓版可将小程序添加快捷方式到桌面。

　　1、小程序和聊天窗口可迅速切换。

　　2、开发者保留核心功能，一些功能被舍弃。从已经上线的小程序看，开发者均保留了App的核心功能，一些不重要的功能被舍弃，可能与保持流畅运行有关。

　　3、消息通知。商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片，解决用户与小程序的沟通问题。

　　在2017微信公开课Pro上，腾讯集团高级副总裁张小龙宣布将于1月9日上线微信小程序。张小龙解释了用完即走的概念，任何一个工具都是帮助用户提高它的效率的，用最高效率的方法去完成它的任务，这是工具的目的，工具的使命。微信也是一个工具，所以微信的目的也是帮助用户用最高效的方法去完成它的任务。什么是最高效的方法?就是用最短的时间去完成任务，也就是说一旦用户完成了它的任务，它就应该去做别的事情，而不是停留在产品里面。

　　微信小程序没有集中入口，不会推出小程序商店，也不会向用户推荐小程序，没有粉丝，只有访问，只有访问量，不能推送消息，也不能像微信公众号一样做游戏。

　　从形态开看，小程序体现了张小龙关于未来程序的思考。他指出，所有的应用程序应该是一种无处不在，但是又可以随时访问的一种状态。小程序是一种不需要下载、安装即可使用的应用，它实现了触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。(明宇)

}

绿色游网