小程序云服务器--环境配置

本来想要买腾讯云的云服务器,作为小程序的服务端的。无奈,腾讯云卖的太贵了,比阿里云要贵一倍,想想还是算了。

但是,没有服务端的接受,小程序的一些功能是实现不了的。找了一圈,发现一个腾讯云的小程序解决方案,完美解决了开发过程的问题(后期上线的话,要买服务器再说)

登陆微信公众平台,在 设置--开发者工具,开通腾讯云后,点击后台管理,就可以进入开发环境的配置页面。根据里面的操作进行配置,教程很全面。(也可以根据这个教程进行配置)链接:https://cloud.tencent.com/developer/article/1006816

服务器问题解决了,把之前未完成的代码复制过来,继续编写工作。

第一部分,文字输入框 + 图片输入框

接上一篇。

配置好服务环境,对图片上传后,就能正常显示了。

上传图片,完整js代码:

  /**
* 添加图片
*/
addImg: function(e){
wx.chooseImage({
success: (res)=> {
// console.log(res)
util.showBusy('正在上传')
var tempFilePaths = res.tempFilePaths; // 上传图片
wx.uploadFile({
url: config.service.uploadUrl,
filePath: tempFilePaths[],
name: 'image', success: (res)=>{
util.showSuccess('上传图片成功')
// console.log(res)
res = JSON.parse(res.data)
// console.log(res)
this.setData({
upImg: true,
picUrl: tempFilePaths[],
temPath: tempFilePaths
})
},
fail: function (e) {
console.error(e)
}
})
},
fail: function (e) {
console.error(e)
}
})
}, /**
* 预览图片
*/
previewImg: function(e) {
wx.previewImage({
urls: this.data.temPath,
success: (res)=>{
// console.log(res)
}
})
},

util.show是一个弹窗显示,是展现给用户看的。wx.uploadFile中的url就是之前环境配置的服务器域名。

ps:图片模块代码写好后,进行测试过程中;发现图片依旧不显示,原来是picUrl中的p一个地方写成了大写,我还以为是环境配错了,找了半天的bug。看来编码还需要细心一些。

这里后来又添加了一个预览图片的功能,上传完图片后,点击图片可进行预览。

第二部分,位置信息 + 发布按钮

需要用到获取位置信息的api,官方文档

wxml+wxss代码:

  <view class='editItem' bindtap='getLocation'>
<view class='location'>
<image class='locationImg' src='{{locationImgUrl}}'></image>
<text class='locationText'>{{location}}</text>
<image class='arrow' src='{{arrowUrl}}'></image>
</view>
</view>
<view class='submitButton'>
<button form-type='submit' size='mini'>发表</button>
</view>
.editItem {
height: 40px;
border-bottom: solid #7676776b;
padding-top: 5px;
}
.locationImg {
width: 32px;
height: 32px;
}
.location {
position: relative;
}
.locationText {
position: absolute;
padding-top: 5px;
padding-bottom: 5px;
}
.arrow {
float: right;
width: 32px;
height: 32px;
padding-right: 10px;
}
.submitButton {
height: 40px;
}
.submitButton button {
background-color: #8CBEF5;
color: #fff;
float: right;
top: 20px;
right: 20px;
}

js代码:

  /**
* 获取位置信息
*/
getLocation: function(e){
wx.getSetting({
success:(res)=>{
if(!res.authSetting['scope.userLocation']){
wx.authorize({
scope: 'scope.userLocation',
success:(res)=>{
wx.chooseLocation({
success: (res)=> {
// console.log(res);
this.setData({
location: res.name
})
}
})
}
})
}
else{
wx.chooseLocation({
success: (res)=> {
// console.log(res);
this.setData({
location: res.name
})
}
})
}
}
})
}

这里的wx.getSetting方法中的scope.userLocation,是判断用户是否同意获取地理位置信息的权限,没有则提示用户。

发布按钮,表单提交,获取一下用户输入的信息和当前的时间日期,以便后续使用。

js代码:

  /**
* 表单提交
*/
formSubmit: function(e){
// console.log(e)
var now = new Date();
// console.log(now)
var month = now.getMonth();
var date = now.getDate();
this.setData({
blog: e.detail.value.blog,
month: month+,
date: date,
show: false
})
},

完成后的用户编辑页面:

git代码托管

几天,写了不少东西了,传一下github吧,万一没了就惨了。

还未全部完成,先不放链接,等基本功能都完成后吧。

微信小程序—day05的更多相关文章

  1. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  2. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  3. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  4. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  5. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  6. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  7. 来自于微信小程序的一封简讯

    9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...

  8. 微信小程序前端源码逻辑和工作流

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

  9. 微信小程序初探

    做为码农相信大家最近肯定都会听到微信小程序,虽然现阶段还没有正式开放注册,但大家可以还是可以开发测试. 到微信的WIKI(http://mp.weixin.qq.com/wiki?t=resource ...

随机推荐

  1. 最简单的PS渐变导入方法 photoshop渐变插件素材导入教程

    photoshop渐变插件素材可以让用户更好更直接,更快速地设计出自己想要的效果作品.网上有多种多样的ps渐变,那么Mac版Ps渐变怎么导入呢?这里我来和大家分享一下photoshop渐变插件素材导入 ...

  2. Redis数据类型(下)

    集合Set    Redis 的集合不是 个线性结构,而是一个哈希表结构,它的内部会根据 hash 分子来 存储和查找数据,理论上 个集合可以存储 232 (大约 42 亿)个元素,因为采用哈希表结 ...

  3. springmvc(5)拦截器

    1.什么是拦截器 是指通过统一的拦截从浏览器发送到服务器的请求来完成相应服务增强 2.拦截器的基本原理 可以通过配置过滤器解决乱码问题 和过滤器非常相似 3.搭建工程 注意jar包 此时的工程是完成后 ...

  4. 跟着大神学Mongo,Mongodb主从复制本机简单操作总结

    原文链接:http://www.cnblogs.com/huangxincheng/archive/2012/03/04/2379755.html 本机安装MongoDB不在介绍,本文Mongo小菜鸟 ...

  5. selenium基础知识(概述、安装、IDE等)

    参考http://www.yiibai.com/selenium/selenium_webdriver.html

  6. java8的4大核心函数式接口

    //java8的4大核心函数式接口//1.Consumer<T>:消费性接口//需求:public void happy(double money, Consumer<Double& ...

  7. firefox下载文件弹出框之终极解决方案-vbs模拟键盘操作

    由于近期一直被firefox的保存文件弹出框困扰,摸索尝试过几种方法,已有的方法可以跑通但是对对效果不太满意,因此一直在寻找合适的解决办法. 最近发现了也可以通过VBS来处理弹出框,速度也不错,其原理 ...

  8. XCode: 如何添加自定义代码片段

    转载自:http://rockonmycode.com/tips/xcode-code-snippets#more-185 我们经常会定义一些retain的property,而且大概每次我们都会像这样 ...

  9. http1.X与2.0

    HTTP HTTP 1.X HTTP是建立在TCP协议上的,HTTP协议的瓶颈及优化都是基于TCP协议本身的特性. TCP建立连接时有三次握手 会有1.5RTT的延迟,为了避免每次请求都经历握手待来的 ...

  10. 如何将js字符串变成首字母大写其余小写

    有时候会接收到一些大小写不规则的字符串,如"JAMES"."alice"."Amy"等,如何将他们统一的变成首字母大写其余小写的形式呢? 思 ...