精华内容
下载资源
问答
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...

    做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。

    微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:

    在这里插入图片描述

    这里就是做微信小程序开发的全部官方文档。

    知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发:

    第一步:

    下载微信小程序开发者工具并安装,下载路径:

    https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

    进到下载界面后,根据自己的操作系统选择相应的链接进行下载,下载完成后进行安装。

    第二步:登录工具

    开发者工具安装完成后我们就可以将其打开,初次打开会需要用微信扫码登录,入下图,用手机微信扫一扫后确认登录就可以了。
    在这里插入图片描述

    第三步:创建一个项目

    登录成功后,如果是第一次使用该工具会弹出创建项目的窗口,如下图:
    在这里插入图片描述
    ​ 在创建过程中,如果选择的本地文件夹是个空文件夹会出来一个勾选项“在当前目录中创建quick start项目”,为方便初学者了解微信小程序的基本代码结构,请勾选此项,勾选后,开发者工具会帮助我们在开发目录里生成一个简单的 demo,如下图:
    在这里插入图片描述

    第四步:项目代码结构解释

    在这里插入图片描述
    点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

    下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

    ​ 1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

    2、​ app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

    3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

    我们注意到,在实例程序的代码中还有2个文件夹,一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹,pages是存放所有页面的文件夹。我们着重讲一下这个pages.

    第五步:小程序页面文件构成

    在这个示例中,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

    每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

    ​ index.wxml 是页面的结构文件:

    <!--index.wxml-->
    <view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    

    本例中使用了、来搭建页面结构,绑定数据和交互处理函数。

    ​ index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {}
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
      }
    })
    

    index.wxss 是页面的样式表:

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    

    页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

    ​ index.json 是页面的配置文件:

    ​ 页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

    ​ logs 的页面结构

    <!--logs.wxml-->
    <view class="container log-list">
      <block wx:for-items="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block>
    </view>
    

    logs 页面使用 控制标签来组织代码,在 上使用 wx:for-items 绑定 logs 数据,并将 logs 数据循环展开节点

     //logs.js
    var util = require('../../utils/util.js')
    Page({
      data: {
        logs: []
      },
      onLoad: function () {
        this.setData({
          logs: (wx.getStorageSync('logs') || []).map(function (log) {
            return util.formatTime(new Date(log))
          })
        })
      }
    })
    

    运行结果如下:
    在这里插入图片描述

    第六步:手机预览(只有获得AppId的才有权限预览)

    ​ 开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。
    在这里插入图片描述
    以上是微信小程序前端开发的基本流程,而实际上要做一个内容可以更新的小程序,单有前端开发是远远不够的,还需要后台开发。后台开发与web开发的后台基本无异,可以选择用java、php、nodejs等任一语言,有一点需要注意的是小程序后台服务器必须是https协议的,这就要求必须购买云服务器并将后台服务器设置成https服务。

    展开全文
  • 微信小程序权限解析

    2020-07-21 19:30:10
    小程序开放的授权 scope 列表 描述 对应接口 scope 用户信息 wx.getUserInfo scope.userInfo 定位(地理位置) wx.getLocation wx.chooseLocation scope.userLocation 通讯地址 wx.chooseAddress scope....

    小程序开放的授权

    scope 列表

    描述 对应接口 scope
    用户信息 wx.getUserInfo scope.userInfo
    定位(地理位置) wx.getLocation wx.chooseLocation scope.userLocation
    通讯地址 wx.chooseAddress scope.address
    发票抬头 wx.chooseInvoiceTitle scope.invoiceTitle
    获取发票 wx.chooseInvoice scope.invoice
    微信运动步数 wx.getWeRunData scope.werun
    录音功能 wx.startRecord scope.record
    保存到相册 wx.saveImageToPhoneAlbum wx.saveVideoToPhoneAlbum scope.writePhoneAlbum
    摄像头 组件 scope.camera

    小程序的授权的调用方式

    1. 直接使用相关的api自动调用,这种调用只能触发一次授权弹窗(无论是同意授权还是拒绝授权)
      列如调用wx.chooseAddress(),只要你在之前没有授权过或者拒绝了授权,就会出现允许调用通讯地址授权窗口
      api触发只能调用一次授权窗口这个问题的解决方案
      可以利用跳转设置页(wx.openSetting)来引导用户重新授权,还可以通过button按钮来跳转设置页的方式来重新授权
      <button open-type="openSetting">跳转设置页</button>
      
    2. 预授权
      代码如下:
      //调用发票抬头的权限
      wx.authorize({//预授权
      	scope:'scope.invoiceTitle',
      	success:function(res){
      		console.log('发票抬头授权成功')
      	},
      	fail:function(err){
      		console.log('发票抬头授权失败')
      	},
      	complete:function(){
      		console.log('complete')
      	}
      })
      
    3. 组件方式
      列如使用button按钮来获取用户信息,手机号码等,可以无限次调用,只要你之前没有成功授权就可以成功的调用
      <button open-type="getUserInfo">获取用户信息</button>
      

    wx.getSetting() 可以获取到已申请到的所有的权限的授权结果(通过对应的字段true或false来标识
    wx.openSetting() 跳转设置页–设置界面只会出现小程序已经向用户请求过的权限,2.3.0 版本开始,用户发生点击行为后,才可以跳转打开设置页,管理授权信息

    展开全文
  • 微信小程序-木棉小镇 一个朋友的项目,所有前端代码在这里公开,都是模拟数据,后面的接口将不会更新。 项目主要有以下几个特点: 利用小程序的template做的组件,主要还是依靠比较好目录结构,开发者的权限还是...
  • 作者(转载请注明出处):Happy王子乐 个人网站(整理了部分学习资源,以及...相关文章: (微信小程序微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,...

    作者(转载请注明出处):Happy王子乐
    个人网站(整理部分学习资料):http://www.demxy.com/
    个人GitHub(喜欢的还请点个Star、flow一下):https://github.com/HappyWjl

    一、环境搭建

    • 参考教程:https://blog.csdn.net/u012888052/article/details/79623229

    • 另外,因为程序涉及微信登录功能,还需要自己注册个测试账号,相关地址:https://developers.weixin.qq.com/sandbox
      里面的AppID、AppSecret,后面需要配置到java后台配置文件中。

    • 此项目,代码样式为网上搜集,如有雷同,纯属巧合。

    二、相关技术栈

    css:略
    javascript:略
    weui:微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库,各种官方组件,好用简洁。

    三、项目简单介绍

    • 当用户扫描小程序二维码后,即可进入小程序首页,目前此项目未发布到线上,所以还没有公开的二维码。
      主页面提供美食轮播图,可在后台自定义图片;
      下方展示了店铺名称、店铺地址信息,可在后台自定义文案;
      用户进行授权时,会调用微信小程序api,获取openid等值,并通过后端接口将用户信息保存到数据库中。
    • 点餐页
      在这里插入图片描述
      当点击中间“点餐”按钮后,进入到点餐页,通过左侧的列表,展示了菜品的各种类目。点击类目,可以看到右侧详细的商品列表了,包括商品名称、商品描述、库存、价格,这些信息都可以在管理后台进行修改。
      在这里插入图片描述
      当点击商品右下角的“➕”时,商品会加入到购物车
      在这里插入图片描述
      点击购物车图标时,可以显示购物车内商品详情,并且可以一键清空购物车。
    • 确认订单页
      在这里插入图片描述
      确认订单页可以选择就餐人数,方便上菜时,提供适合的餐筷。
      在这里插入图片描述
      点击下方按钮时,可以选择支付方式,分别为:会员卡、微信支付、银行卡。
      当选择完支付方式后,订单即为"已支付"状态。
    • 我的页
      在这里插入图片描述
      我的页可以修改个人信息,查看刚刚下过的订单,查看发表过的评价,并且可以直接拨打商家电话。
      在这里插入图片描述
      点击头像时,修改信息页弹出,可自行修改用户信息。
      在这里插入图片描述
      点击上方状态菜单,可查看不同状态下的订单信息。
      在这里插入图片描述
      当上菜后,后台管理系统可以完结订单,用户端即显示为“待评价”状态。
      在这里插入图片描述
      评价订单可以输入文字,进行美味的描述。。
      在这里插入图片描述
      评价完成后,订单为真正的完成状态,此时可以查看评价内容
      在这里插入图片描述
      评价内容可以选择查看全部或者自己的评价内容

    四、项目注意点

    • 项目采用了微信小程序 云开发,所以需要开启云开发权限
      在这里插入图片描述
      点击微信开发工具上方的云开发菜单
      在这里插入图片描述
      在云函数中配置上云函数名称

    以上

    小程序前端讲解地址:https://blog.csdn.net/u012888052/article/details/101530460

    java后台、html管理后台 项目讲解地址:https://blog.csdn.net/u012888052/article/details/101768315


    作者:Happy王子乐

    展开全文
  • 微信小程序+权限操作

    千次阅读 2020-05-28 23:54:06
    微信小程序+权限操作 wx.getSetting(Object object) 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。 参数和回调函数 实例代码: 如果让用户点击授权或者拒绝呢 需要使用wx.authorize(Object...

    微信小程序+权限操作

    在小程序端查询数据(只能查询到用户在小程序中创建的数据,导入的数据是查不到的;要想查到导入的数据需要把数据表中的权限改为所有*用户可读 *)

    在这里插入图片描述
    wx.getSetting(Object object)
    获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。

    参数和回调函数
    在这里插入图片描述
    实例代码:
    在这里插入图片描述
    如果让用户点击授权或者拒绝呢
    需要使用wx.authorize(Object object)
    wx.authorize(Object object)会弹出一个框

    scope: ‘scope.werun’,是不可缺少的,他是获取指定权限的重要一步
    在这里插入图片描述
    在云函数中获取的登录用户的id
    const context= cloud.getWXContext()
    在这里插入图片描述
    数据库相对应的方法获取(数据库时间。。。)等等
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.serverDate.html
    在这里插入图片描述

    展开全文
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • 微信小程序录音权限

    千次阅读 2020-04-21 14:51:53
    #微信小程序录音权限设置 wx.showModal({ //====> 授权 title: '提示', content: '您未授权录音,功能将无法使用', showCancel: true, confirmText: "授权", confirmColor: "#52a2d8", ...
  • 要理解微信小程序的成员管理,首先要理解微信小程序的注册。 微信小程序的注册需要用户提供一个邮箱作为登录账号,并绑定一个微信号作为管理员。 登录账号会得到一个官方提供的appid作为标识码,作为登录账号的...
  • 权限被拒绝再次授权 示例库 代码片段
  • @[TOC](关于微信小程序权限问题或未使用你的任何信息情况) 微信权限获取有两种,第一种为button按钮获取,这种获取一般用于用户信息,如 <button wx:if="{{!hasUserInfo && canIUse}}" open-type=...
  • 微信小程序打开权限设置

    千次阅读 2020-06-12 18:00:16
    微信小程序打开权限设置 绑定一个点击事件就行 权限. //打开已经获取过的权限列表 clickme: function () { let that=this; wx.openSetting({ success: function (osrs) { // 出发条件是返回的时候 wx....
  • 成都奥佩德科技有限公司面向成都地区用户推荐成都微信小程序开发,微信小程序开发,微信小程序开发公司,微信商城开发公司。 成都微信小程序开发公司哪家好,成都微信小程序开发费用多少,微信小程序定制需要多少钱? ...
  • 微信小程序唤起其他微信小程序 / 移动应用App唤起小程序 1. 微信小程序唤起微信小程序 小程序唤起其他小程序很简单 先上链接 小程序跳转小程序 Navigator组件 推荐使用 小程序跳转小程序 wx....
  • 被动退出: 管理者直接在微信小程序管理平台直接把你踢出去,但是你得联系到你的管理员。 主动退出: 在手机上关注公众平台安全助手 ===> 绑定查询 ===> 点击要退出的账号 ===> 解除绑定 ...
  • 微信小程序获取scope中权限管理

    千次阅读 2017-10-20 15:07:45
    获取权限管理,以“微信步数计数”
  • 微信小程序常识】如何绑定微信小程序体验者
  • 微信小程序示例_微信小程序组件/接口大全下载微信客户端版本号:6.3.27 及以上,只有小程序绑定的开发者有权限扫码体验。源码下载:下载源码 版本20170111 ...
  • 微信小程序控制硬件第1篇 】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! 【微信小程序控制硬件第2篇 】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的...
  • 最近在做微信小程序的时候用到了小程序的tgit,在网上找了一圈也没有一个完整的教程,所以在这写个完整的教程。 1、开通tgit(设置-开发者工具-tgit) 2、设置成员账号 3、开发者工具-版本管理 4、设置连接...
  • 主要为大家详细介绍了微信小程序保存图片到相册权限设置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序示例_微信小...下载微信客户端版本号:6.3.27 及以上,只有微信小程序绑定的开发者有权限扫码体验。 源码下载: 下载源码 版本20170111 posted on 2018-07-...
  • 微信小程序

    2017-01-09 13:03:45
    微信小程序分享: 微信小程序认证指引 http://t.cn/RI1RMEO 微信小程序接入指南 http://t.cn/RI1RKRi 微信小程序开发指南 http://t.cn/RI1RYEe 微信小程序平台运营规范 http://t.cn/RI1R8tO 个人进行申请开发者...
  • 主要为大家详细介绍了微信小程序云开发实现云数据库读写权限,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序之授权登录(附完整源码)

    万次阅读 多人点赞 2018-03-21 10:38:05
    个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:... 微信小程序之授权登录 一、前言 由于微信官方修改了 getUserIn...
  • 小程序消息推送至公众号(服务号) 可以通过小程序openid推送到公众号(服务号),要求如下 小程序和公众号的主体需要保持一致 在公众号中需要关联小程序; 消息模板 消息模板库中的模板在不同公众号...
  • 我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。 1-1,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。 当然了,也可以直接通过下面链接去下载 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,797
精华内容 14,318
关键字:

微信小程序权限管理

微信小程序 订阅