1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手 机:</text> <input type="number" placeholder="请…
转自:https://developers.weixin.qq.com/miniprogram/dev/index.html 响应的数据绑定 框架的核心是一个响应的数据绑定系统. 整个小程序框架系统分为两部分:视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 页面管理 框架 管理了整个小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期.开发者需要做的只是将页面的数据…
说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 1.安装 thinkjs 安装thinkjs工具包 npm install -g think-cli 2.创建 thinkjs 项目 thinkjs new demo; cd demo; npm install; npm start; 3.让框架支持 mongo 模型 在demo项目的config文…
功能如图: 虽然工作中只负责小程序后台开发,但是还是小程序开发产生了浓厚的兴趣,官方文档也是超级详细了 这里就简单做一个快递单号的查询: 新建一个page: 接着就可以写wxml了.这里用一个简单的input和一个滚动视图: <!--pages/express/express.wxml--> <view class='title'> <text>快递查询</text> </view> <!-- 输入框 --> <view>…
前言 之前写小程序,每次请求后台时都直接调用原生的API,wx.request,每次都要写url,data,回调函数等,正好前段时间,小程序项目需要添加新内容,趁此机会,做一个封装的请求工具,比较简单. 本文若有出入,请指正--来自小渣渣的颤抖 客官可移步小站看本文http://fanjiajia.cn/2019/07/06/wxxcx/flx1/ 原生的API 首先看看原生的api,wx.request需要写如下东西: wx.request({ url: '', // url地址 // 参数…
wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width height = rect.height top = rect.top }).exec() 如上,拿到了id为box的view,并获取到了它的宽.高等属性,此段代码要放在onReady函数中 注意:如果这个view的宽高是随着内容而变化的话,这样获取到的宽高就有可能还是渲染完成前的值,不知是不是小程序自己的…
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view> 2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;"…
一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ px换算rpx (750/屏幕宽度)] App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res this.globalData.windowHeight =…
1.下载工具链接:http://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715 2.安装完成后图片样式如图: 3.新建项目  说明:选择目录的时候尽量新建微信独立的工作空间[个人习惯] 4.打开项目效果图如下…
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平拖动新闻--> <scroll-view scroll-x class="menu"> <view class="scroll-nav"> <navigator url="">社会新闻</navigat…